<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业OA系统原型设计</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .section-title {
            margin: 30px 0 20px;
            font-size: 24px;
            font-weight: bold;
            color: #333;
            border-left: 4px solid var(--primary-color);
            padding-left: 10px;
        }
        .section-desc {
            margin-bottom: 20px;
            color: var(--text-secondary);
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 style="text-align: center; margin: 30px 0;">企业OA系统原型设计</h1>
        
        <!-- 登录与首页模块 -->
        <h2 class="section-title">登录与首页</h2>
        <p class="section-desc">系统入口和主界面，提供各功能模块的导航入口</p>
        <div class="prototype-container">
            <!-- 登录界面 -->
            <div class="prototype">
                <div class="prototype-title">登录界面</div>
                <div style="flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 20px;">
                    <div style="text-align: center; margin-bottom: 40px;">
                        <i class="fas fa-building" style="font-size: 50px; color: var(--primary-color);"></i>
                        <h2 style="margin-top: 15px; color: var(--text-primary);">企业OA系统</h2>
                    </div>
                    <div class="form">
                        <div class="form-item">
                            <input type="text" class="form-input" placeholder="请输入用户名/手机号">
                        </div>
                        <div class="form-item">
                            <input type="password" class="form-input" placeholder="请输入密码">
                        </div>
                        <div class="form-item" style="display: flex; justify-content: space-between; align-items: center;">
                            <label style="display: flex; align-items: center;">
                                <input type="checkbox" style="margin-right: 8px;">
                                <span>记住密码</span>
                            </label>
                            <a href="#" style="color: var(--primary-color); text-decoration: none;">忘记密码?</a>
                        </div>
                        <button class="btn btn-primary btn-block">登录</button>
                    </div>
                </div>
            </div>
            
            <!-- 首页界面 -->
            <div class="prototype">
                <div class="prototype-title">首页界面</div>
                <div class="app-header">
                    <div class="back-button"><i class="fas fa-bars"></i></div>
                    <div class="header-title">首页</div>
                    <div class="header-action badge">
                        <i class="fas fa-bell"></i>
                        <span class="badge-dot"></span>
                    </div>
                </div>
                <div style="flex: 1; overflow-y: auto; padding: 15px; background-color: #f5f5f5;">
                    <!-- 工作台 -->
                    <div style="display: flex; flex-wrap: wrap; margin-bottom: 15px; background-color: white; border-radius: 8px; padding: 15px;">
                        <div style="width: 25%; text-align: center; margin-bottom: 15px;">
                            <div style="width: 50px; height: 50px; border-radius: 8px; background-color: rgba(24, 144, 255, 0.1); color: var(--primary-color); display: flex; align-items: center; justify-content: center; margin: 0 auto 8px;">
                                <i class="fas fa-clipboard-list"></i>
                            </div>
                            <div style="font-size: 12px;">待办事项</div>
                        </div>
                        <div style="width: 25%; text-align: center; margin-bottom: 15px;">
                            <div style="width: 50px; height: 50px; border-radius: 8px; background-color: rgba(82, 196, 26, 0.1); color: var(--success-color); display: flex; align-items: center; justify-content: center; margin: 0 auto 8px;">
                                <i class="fas fa-check-circle"></i>
                            </div>
                            <div style="font-size: 12px;">已办事项</div>
                        </div>
                        <div style="width: 25%; text-align: center; margin-bottom: 15px;">
                            <div style="width: 50px; height: 50px; border-radius: 8px; background-color: rgba(250, 173, 20, 0.1); color: var(--warning-color); display: flex; align-items: center; justify-content: center; margin: 0 auto 8px;">
                                <i class="fas fa-file-alt"></i>
                            </div>
                            <div style="font-size: 12px;">我的申请</div>
                        </div>
                        <div style="width: 25%; text-align: center; margin-bottom: 15px;">
                            <div style="width: 50px; height: 50px; border-radius: 8px; background-color: rgba(245, 82, 45, 0.1); color: var(--error-color); display: flex; align-items: center; justify-content: center; margin: 0 auto 8px;">
                                <i class="fas fa-calendar-alt"></i>
                            </div>
                            <div style="font-size: 12px;">日程安排</div>
                        </div>
                        <div style="width: 25%; text-align: center; margin-bottom: 15px;">
                            <div style="width: 50px; height: 50px; border-radius: 8px; background-color: rgba(24, 144, 255, 0.1); color: var(--primary-color); display: flex; align-items: center; justify-content: center; margin: 0 auto 8px;">
                                <i class="fas fa-users"></i>
                            </div>
                            <div style="font-size: 12px;">通讯录</div>
                        </div>
                        <div style="width: 25%; text-align: center; margin-bottom: 15px;">
                            <div style="width: 50px; height: 50px; border-radius: 8px; background-color: rgba(82, 196, 26, 0.1); color: var(--success-color); display: flex; align-items: center; justify-content: center; margin: 0 auto 8px;">
                                <i class="fas fa-sitemap"></i>
                            </div>
                            <div style="font-size: 12px;">组织架构</div>
                        </div>
                        <div style="width: 25%; text-align: center; margin-bottom: 15px;">
                            <div style="width: 50px; height: 50px; border-radius: 8px; background-color: rgba(250, 173, 20, 0.1); color: var(--warning-color); display: flex; align-items: center; justify-content: center; margin: 0 auto 8px;">
                                <i class="fas fa-folder"></i>
                            </div>
                            <div style="font-size: 12px;">文件中心</div>
                        </div>
                        <div style="width: 25%; text-align: center; margin-bottom: 15px;">
                            <div style="width: 50px; height: 50px; border-radius: 8px; background-color: rgba(245, 82, 45, 0.1); color: var(--error-color); display: flex; align-items: center; justify-content: center; margin: 0 auto 8px;">
                                <i class="fas fa-cog"></i>
                            </div>
                            <div style="font-size: 12px;">系统设置</div>
                        </div>
                    </div>
                    
                    <!-- 待办事项 -->
                    <div class="card">
                        <div class="card-header">
                            待办事项 <span style="color: var(--error-color);">3</span>
                            <i class="fas fa-angle-right" style="color: var(--text-secondary);"></i>
                        </div>
                        <div class="card-body" style="padding: 0;">
                            <div class="list-item">
                                <div class="item-content">
                                    <div class="item-title">李经理的请假申请</div>
                                    <div class="item-desc">需要您审批的请假申请</div>
                                </div>
                                <div class="item-right">
                                    <span class="tag tag-blue">待审批</span>
                                </div>
                            </div>
                            <div class="list-item">
                                <div class="item-content">
                                    <div class="item-title">王总的报销申请</div>
                                    <div class="item-desc">需要您审批的报销申请</div>
                                </div>
                                <div class="item-right">
                                    <span class="tag tag-blue">待审批</span>
                                </div>
                            </div>
                            <div class="list-item" style="border-bottom: none;">
                                <div class="item-content">
                                    <div class="item-title">采购部季度会议</div>
                                    <div class="item-desc">4月10日 14:30-16:00</div>
                                </div>
                                <div class="item-right">
                                    <span class="tag tag-orange">待参加</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 公告信息 -->
                    <div class="card">
                        <div class="card-header">
                            公告信息
                            <i class="fas fa-angle-right" style="color: var(--text-secondary);"></i>
                        </div>
                        <div class="card-body" style="padding: 0;">
                            <div class="list-item">
                                <div class="item-content">
                                    <div class="item-title">关于五一劳动节放假安排的通知</div>
                                    <div class="item-desc">行政部 · 2025-04-05</div>
                                </div>
                                <div class="item-right">
                                    <i class="fas fa-angle-right" style="color: var(--text-secondary);"></i>
                                </div>
                            </div>
                            <div class="list-item" style="border-bottom: none;">
                                <div class="item-content">
                                    <div class="item-title">季度财务报表提交截止时间通知</div>
                                    <div class="item-desc">财务部 · 2025-04-01</div>
                                </div>
                                <div class="item-right">
                                    <i class="fas fa-angle-right" style="color: var(--text-secondary);"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 底部导航 -->
                <div class="bottom-nav">
                    <div class="nav-item active">
                        <i class="fas fa-home nav-icon"></i>
                        <span>首页</span>
                    </div>
                    <div class="nav-item">
                        <i class="fas fa-clipboard-list nav-icon"></i>
                        <span>工作</span>
                    </div>
                    <div class="nav-item">
                        <i class="fas fa-comment nav-icon"></i>
                        <span>消息</span>
                    </div>
                    <div class="nav-item">
                        <i class="fas fa-user nav-icon"></i>
                        <span>我的</span>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 审批流程模块 -->
        <h2 class="section-title">审批流程</h2>
        <p class="section-desc">各类审批表单及流程跟踪界面</p>
        <div class="prototype-container">
            <!-- 审批列表界面 -->
            <div class="prototype">
                <div class="prototype-title">审批列表</div>
                <div class="app-header">
                    <div class="back-button"><i class="fas fa-arrow-left"></i></div>
                    <div class="header-title">我的审批</div>
                    <div class="header-action"><i class="fas fa-plus"></i></div>
                </div>
                <div class="search-bar">
                    <i class="fas fa-search search-icon"></i>
                    <input type="text" class="search-input" placeholder="搜索审批">
                </div>
                <div style="background-color: white; display: flex; padding: 12px 0; border-bottom: 1px solid var(--border-color);">
                    <div style="flex: 1; text-align: center; font-size: 14px; color: var(--primary-color); border-bottom: 2px solid var(--primary-color); padding-bottom: 8px;">
                        待我审批
                    </div>
                    <div style="flex: 1; text-align: center; font-size: 14px; color: var(--text-secondary); padding-bottom: 8px;">
                        我已审批
                    </div>
                    <div style="flex: 1; text-align: center; font-size: 14px; color: var(--text-secondary); padding-bottom: 8px;">
                        我发起的
                    </div>
                </div>
                <div class="list">
                    <div class="list-item">
                        <div class="avatar" style="background-color: var(--primary-color);">李</div>
                        <div class="item-content">
                            <div class="item-title">李经理的请假申请</div>
                            <div class="item-desc">请假类型: 年假 · 2天</div>
                            <div style="margin-top: 5px;">
                                <span class="tag tag-blue">待审批</span>
                                <span style="font-size: 12px; color: var(--text-secondary);">2025-04-07 10:30</span>
                            </div>
                        </div>
                        <div class="item-right">
                            <i class="fas fa-angle-right" style="color: var(--text-secondary);"></i>
                        </div>
                    </div>
                    <div class="list-item">
                        <div class="avatar" style="background-color: var(--warning-color);">王</div>
                        <div class="item-content">
                            <div class="item-title">王总的报销申请</div>
                            <div class="item-desc">报销类型: 差旅费 · ¥3,500</div>
                            <div style="margin-top: 5px;">
                                <span class="tag tag-blue">待审批</span>
                                <span style="font-size: 12px; color: var(--text-secondary);">2025-04-06 15:20</span>
                            </div>
                        </div>
                        <div class="item-right">
                            <i class="fas fa-angle-right" style="color: var(--text-secondary);"></i>
                        </div>
                    </div>
                    <div class="list-item">
                        <div class="avatar" style="background-color: var(--success-color);">张</div>
                        <div class="item-content">
                            <div class="item-title">张工的采购申请</div>
                            <div class="item-desc">采购物品: 办公设备 · ¥12,800</div>
                            <div style="margin-top: 5px;">
                                <span class="tag tag-blue">待审批</span>
                                <span style="font-size: 12px; color: var(--text-secondary);">2025-04-05 09:15</span>
                            </div>
                        </div>
                        <div class="item-right">
                            <i class="fas fa-angle-right" style="color: var(--text-secondary);"></i>
                        </div>
                    </div>
                </div>
                <!-- 底部导航 -->
                <div class="bottom-nav">
                    <div class="nav-item">
                        <i class="fas fa-home nav-icon"></i>
                        <span>首页</span>
                    </div>
                    <div class="nav-item active">
                        <i class="fas fa-clipboard-list nav-icon"></i>
                        <span>工作</span>
                    </div>
                    <div class="nav-item">
                        <i class="fas fa-comment nav-icon"></i>
                        <span>消息</span>
                    </div>
                    <div class="nav-item">
                        <i class="fas fa-user nav-icon"></i>
                        <span>我的</span>
                    </div>
                </div>
            </div>
            
            <!-- 审批详情界面 -->
            <div class="prototype">
                <div class="prototype-title">审批详情</div>
                <div class="app-header">
                    <div class="back-button"><i class="fas fa-arrow-left"></i></div>
                    <div class="header-title">请假审批</div>
                    <div class="header-action"><i class="fas fa-ellipsis-v"></i></div>
                </div>
                <div style="flex: 1; overflow-y: auto; background-color: #f5f5f5;">
                    <div class="card">
                        <div class="card-header">基本信息</div>
                        <div class="card-body">
                            <div style="display: flex; margin-bottom: 12px;">
                                <div style="width: 80px; color: var(--text-secondary);">申请人</div>
                                <div style="flex: 1; display: flex; align-items: center;">
                                    <div class="avatar" style="width: 30px; height: 30px; background-color: var(--primary-color); margin-right: 8px;">李</div>
                                    李经理（研发部）
                                </div>
                            </div>
                            <div style="display: flex; margin-bottom: 12px;">
                                <div style="width: 80px; color: var(--text-secondary);">请假类型</div>
                                <div>年假</div>
                            </div>
                            <div style="display: flex; margin-bottom: 12px;">
                                <div style="width: 80px; color: var(--text-secondary);">开始时间</div>
                                <div>2025-04-15 09:00</div>
                            </div>
                            <div style="display: flex; margin-bottom: 12px;">
                                <div style="width: 80px; color: var(--text-secondary);">结束时间</div>
                                <div>2025-04-16 18:00</div>
                            </div>
                            <div style="display: flex; margin-bottom: 12px;">
                                <div style="width: 80px; color: var(--text-secondary);">请假天数</div>
                                <div>2天</div>
                            </div>
                            <div style="display: flex; margin-bottom: 12px;">
                                <div style="width: 80px; color: var(--text-secondary);">请假事由</div>
                                <div>需要处理个人事务，申请休年假两天。</div>
                            </div>
                            <div style="display: flex;">
                                <div style="width: 80px; color: var(--text-secondary);">附件</div>
                                <div style="color: var(--primary-color);">
                                    <i class="fas fa-paperclip"></i> 请假申请.pdf
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">审批流程</div>
                        <div class="card-body">
                            <div class="workflow-step">
                                <div class="step-number active">1</div>
                                <div style="flex: 1;">
                                    <div style="display: flex; justify-content: space-between;">
                                        <div>
                                            <div>李经理（发起人）</div>
                                            <div style="font-size: 12px; color: var(--text-secondary);">2025-04-07 10:30</div>
                                        </div>
                                        <div style="color: var(--success-color);">
                                            <i class="fas fa-check-circle"></i> 已提交
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="step-line"></div>
                            <div class="workflow-step">
                                <div class="step-number active">2</div>
                                <div style="flex: 1;">
                                    <div style="display: flex; justify-content: space-between;">
                                        <div>
                                            <div>赵部长（直接上级）</div>
                                            <div style="font-size: 12px; color: var(--text-secondary);">2025-04-07 11:45</div>
                                        </div>
                                        <div style="color: var(--success-color);">
                                            <i class="fas fa-check-circle"></i> 已通过
                                        </div>
                                    </div>
                                    <div style="font-size: 12px; color: var(--text-secondary); margin-top: 5px;">批语：同意，请安排好工作交接。</div>
                                </div>
                            </div>
                            <div class="step-line"></div>
                            <div class="workflow-step">
                                <div class="step-number active">3</div>
                                <div style="flex: 1;">
                                    <div style="display: flex; justify-content: space-between;">
                                        <div>
                                            <div>张总监（您）</div>
                                            <div style="font-size: 12px; color: var(--text-secondary);">待审批</div>
                                        </div>
                                        <div style="color: var(--primary-color);">
                                            <i class="fas fa-clock"></i> 审批中
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="padding: 15px; display: flex; background-color: white; border-top: 1px solid var(--border-color);">
                    <div style="flex: 1; margin-right: 10px;">
                        <button class="btn btn-block" style="background-color: #f5f5f5; color: var(--text-primary);">拒绝</button>
                    </div>
                    <div style="flex: 1;">
                        <button class="btn btn-primary btn-block">同意</button>
                    </div>
                </div>
            </div>
            
            <!-- 发起审批界面 -->
            <div class="prototype">
                <div class="prototype-title">发起审批</div>
                <div class="app-header">
                    <div class="back-button"><i class="fas fa-arrow-left"></i></div>
                    <div class="header-title">请假申请</div>
                    <div class="header-action"></div>
                </div>
                <div style="flex: 1; overflow-y: auto; background-color: #f5f5f5; padding: 15px;">
                    <div class="card">
                        <div class="card-body">
                            <div class="form">
                                <div class="form-item">
                                    <label class="form-label">请假类型</label>
                                    <select class="form-select">
                                        <option>年假</option>
                                        <option>事假</option>
                                        <option>病假</option>
                                        <option>婚假</option>
                                        <option>产假</option>
                                        <option>丧假</option>
                                    </select>
                                </div>
                                <div class="form-item">
                                    <label class="form-label">开始时间</label>
                                    <input type="text" class="form-input" placeholder="选择开始时间" value="2025-04-15 09:00">
                                </div>
                                <div class="form-item">
                                    <label class="form-label">结束时间</label>
                                    <input type="text" class="form-input" placeholder="选择结束时间" value="2025-04-16 18:00">
                                </div>
                                <div class="form-item">
                                    <label class="form-label">请假天数</label>
                                    <input type="text" class="form-input" placeholder="请输入请假天数" value="2">
                                </div>
                                <div class="form-item">
                                    <label class="form-label">请假事由</label>
                                    <textarea class="form-input" placeholder="请输入请假事由">需要处理个人事务，申请休年假两天。</textarea>
                                </div>
                                <div class="form-item">
                                    <label class="form-label">上传附件（选填）</label>
                                    <div style="display: flex; align-items: center; border: 1px dashed var(--border-color); border-radius: 4px; padding: 15px; background-color: #fafafa; justify-content: center;">
                                        <i class="fas fa-plus" style="margin-right: 8px; color: var(--text-secondary);"></i>
                                        <span style="color: var(--text-secondary);">添加附件</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">审批流程</div>
                        <div class="card-body">
                            <div style="display: flex; justify-content: space-between; margin-bottom: 15px; align-items: center;">
                                <div>直接上级审批</div>
                                <div style="display: flex; align-items: center; color: var(--text-secondary);">
                                    <span>赵部长</span>
                                    <i class="fas fa-angle-right" style="margin-left: 8px;"></i>
                                </div>
                            </div>
                            <div style="display: flex; justify-content: space-between; align-items: center;">
                                <div>部门总监审批</div>
                                <div style="display: flex; align-items: center; color: var(--text-secondary);">
                                    <span>张总监</span>
                                    <i class="fas fa-angle-right" style="margin-left: 8px;"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="padding: 15px; background-color: white; border-top: 1px solid var(--border-color);">
                    <button class="btn btn-primary btn-block">提交申请</button>
                </div>
            </div>
        </div>
        
        <!-- 组织架构与通讯录模块 -->
        <h2 class="section-title">组织架构与通讯录</h2>
        <p class="section-desc">公司组织结构及员工联系方式查询</p>
        <div class="prototype-container">
            <!-- 组织架构界面 -->
            <div class="prototype">
                <div class="prototype-title">组织架构</div>
                <div class="app-header">
                    <div class="back-button"><i class="fas fa-arrow-left"></i></div>
                    <div class="header-title">组织架构</div>
                    <div class="header-action"><i class="fas fa-search"></i></div>
                </div>
                <div class="list">
                    <div class="tree-node">
                        <div class="tree-toggle"><i class="fas fa-chevron-down"></i></div>
                        <div class="avatar" style="width: 30px; height: 30px; background-color: var(--primary-color); margin-right: 10px;">总</div>
                        <div>
                            <div>总裁办</div>
                            <div style="font-size: 12px; color: var(--text-secondary);">15人</div>
                        </div>
                    </div>
                    <div class="tree-child">
                        <div class="tree-node">
                            <div class="tree-toggle" style="visibility: hidden;"></div>
                            <div class="avatar" style="width: 30px; height: 30px; background-color: var(--text-secondary); margin-right: 10px;">张</div>
                            <div>
                                <div>张总 - 总裁</div>
                                <div style="font-size: 12px; color: var(--text-secondary);">总裁办</div>
                            </div>
                        </div>
                        <div class="tree-node">
                            <div class="tree-toggle" style="visibility: hidden;"></div>
                            <div class="avatar" style="width: 30px; height: 30px; background-color: var(--text-secondary); margin-right: 10px;">李</div>
                            <div>
                                <div>李秘 - 行政秘书</div>
                                <div style="font-size: 12px; color: var(--text-secondary);">总裁办</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="tree-node">
                        <div class="tree-toggle"><i class="fas fa-chevron-right"></i></div>
                        <div class="avatar" style="width: 30px; height: 30px; background-color: var(--success-color); margin-right: 10px;">研</div>
                        <div>
                            <div>研发部</div>
                            <div style="font-size: 12px; color: var(--text-secondary);">38人</div>
                        </div>
                    </div>
                    
                    <div class="tree-node">
                        <div class="tree-toggle"><i class="fas fa-chevron-right"></i></div>
                        <div class="avatar" style="width: 30px; height: 30px; background-color: var(--warning-color); margin-right: 10px;">市</div>
                        <div>
                            <div>市场部</div>
                            <div style="font-size: 12px; color: var(--text-secondary);">25人</div>
                        </div>
                    </div>
                    
                    <div class="tree-node">
                        <div class="tree-toggle"><i class="fas fa-chevron-right"></i></div>
                        <div class="avatar" style="width: 30px; height: 30px; background-color: var(--error-color); margin-right: 10px;">销</div>
                        <div>
                            <div>销售部</div>
                            <div style="font-size: 12px; color: var(--text-secondary);">42人</div>
                        </div>
                    </div>
                    
                    <div class="tree-node">
                        <div class="tree-toggle"><i class="fas fa-chevron-right"></i></div>
                        <div class="avatar" style="width: 30px; height: 30px; background-color: var(--primary-color); margin-right: 10px;">人</div>
                        <div>
                            <div>人力资源部</div>
                            <div style="font-size: 12px; color: var(--text-secondary);">12人</div>
                        </div>
                    </div>
                    
                    <div class="tree-node">
                        <div class="tree-toggle"><i class="fas fa-chevron-right"></i></div>
                        <div class="avatar" style="width: 30px; height: 30px; background-color: var(--success-color); margin-right: 10px;">财</div>
                        <div>
                            <div>财务部</div>
                            <div style="font-size: 12px; color: var(--text-secondary);">18人</div>
                        </div>
                    </div>
                    
                    <div class="tree-node">
                        <div class="tree-toggle"><i class="fas fa-chevron-right"></i></div>
                        <div class="avatar" style="width: 30px; height: 30px; background-color: var(--warning-color); margin-right: 10px;">行</div>
                        <div>
                            <div>行政部</div>
                            <div style="font-size: 12px; color: var(--text-secondary);">10人</div>
                        </div>
                    </div>
                </div>
                <!-- 底部导航 -->
                <div class="bottom-nav">
                    <div class="nav-item">
                        <i class="fas fa-home nav-icon"></i>
                        <span>首页</span>
                    </div>
                    <div class="nav-item">
                        <i class="fas fa-clipboard-list nav-icon"></i>
                        <span>工作</span>
                    </div>
                    <div class="nav-item">
                        <i class="fas fa-comment nav-icon"></i>
                        <span>消息</span>
                    </div>
                    <div class="nav-item active">
                        <i class="fas fa-user nav-icon"></i>
                        <span>我的</span>
                    </div>
                </div>
            </div>
            
            <!-- 部门详情界面 -->
            <div class="prototype">
                <div class="prototype-title">部门详情</div>
                <div class="app-header">
                    <div class="back-button"><i class="fas fa-arrow-left"></i></div>
                    <div class="header-title">研发部</div>
                    <div class="header-action"><i class="fas fa-search"></i></div>
                </div>
                <div class="search-bar">
                    <i class="fas fa-search search-icon"></i>
                    <input type="text" class="search-input" placeholder="搜索成员">
                </div>
                <div class="list">
                    <div style="padding: 10px 15px; background-color: #f5f5f5; font-size: 12px; color: var(--text-secondary);">
                        部门主管 (1人)
                    </div>
                    <div class="list-item">
                        <div class="avatar" style="background-color: var(--primary-color);">赵</div>
                        <div class="item-content">
                            <div class="item-title">赵部长</div>
                            <div class="item-desc">研发部 · 部门经理</div>
                        </div>
                        <div class="item-right">
                            <i class="fas fa-phone" style="color: var(--primary-color);"></i>
                        </div>
                    </div>
                    
                    <div style="padding: 10px 15px; background-color: #f5f5f5; font-size: 12px; color: var(--text-secondary);">
                        产品组 (8人)
                    </div>
                    <div class="list-item">
                        <div class="avatar" style="background-color: var(--success-color);">王</div>
                        <div class="item-content">
                            <div class="item-title">王产品</div>
                            <div class="item-desc">研发部 · 产品经理</div>
                        </div>
                        <div class="item-right">
                            <i class="fas fa-phone" style="color: var(--primary-color);"></i>
                        </div>
                    </div>
                    <div class="list-item">
                        <div class="avatar" style="background-color: var(--success-color);">钱</div>
                        <div class="item-content">
                            <div class="item-title">钱产品</div>
                            <div class="item-desc">研发部 · 产品经理</div>
                        </div>
                        <div class="item-right">
                            <i class="fas fa-phone" style="color: var(--primary-color);"></i>
                        </div>
                    </div>
                    
                    <div style="padding: 10px 15px; background-color: #f5f5f5; font-size: 12px; color: var(--text-secondary);">
                        开发组 (20人)
                    </div>
                    <div class="list-item">
                        <div class="avatar" style="background-color: var(--warning-color);">孙</div>
                        <div class="item-content">
                            <div class="item-title">孙开发</div>
                            <div class="item-desc">研发部 · 高级开发工程师</div>
                        </div>
                        <div class="item-right">
                            <i class="fas fa-phone" style="color: var(--primary-color);"></i>
                        </div>
                    </div>
                    <div class="list-item">
                        <div class="avatar" style="background-color: var(--warning-color);">李</div>
                        <div class="item-content">
                            <div class="item-title">李开发</div>
                            <div class="item-desc">研发部 · 开发工程师</div>
                        </div>
                        <div class="item-right">
                            <i class="fas fa-phone" style="color: var(--primary-color);"></i>
                        </div>
                    </div>
                    
                    <div style="padding: 10px 15px; background-color: #f5f5f5; font-size: 12px; color: var(--text-secondary);">
                        测试组 (9人)
                    </div>
                    <div class="list-item">
                        <div class="avatar" style="background-color: var(--error-color);">周</div>
                        <div class="item-content">
                            <div class="item-title">周测试</div>
                            <div class="item-desc">研发部 · 测试经理</div>
                        </div>
                        <div class="item-right">
                            <i class="fas fa-phone" style="color: var(--primary-color);"></i>
                        </div>
                    </div>
                    <div class="list-item">
                        <div class="avatar" style="background-color: var(--error-color);">吴</div>
                        <div class="item-content">
                            <div class="item-title">吴测试</div>
                            <div class="item-desc">研发部 · 测试工程师</div>
                        </div>
                        <div class="item-right">
                            <i class="fas fa-phone" style="color: var(--primary-color);"></i>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 通讯录界面 -->
            <div class="prototype">
                <div class="prototype-title">通讯录</div>
                <div class="app-header">
                    <div class="back-button"><i class="fas fa-arrow-left"></i></div>
                    <div class="header-title">通讯录</div>
                    <div class="header-action"><i class="fas fa-search"></i></div>
                </div>
                <div class="search-bar">
                    <i class="fas fa-search search-icon"></i>
                    <input type="text" class="search-input" placeholder="搜索联系人">
                </div>
                <div style="background-color: white; display: flex; padding: 12px 0; border-bottom: 1px solid var(--border-color);">
                    <div style="flex: 1; text-align: center; font-size: 14px; color: var(--primary-color); border-bottom: 2px solid var(--primary-color); padding-bottom: 8px;">
                        按部门
                    </div>
                    <div style="flex: 1; text-align: center; font-size: 14px; color: var(--text-secondary); padding-bottom: 8px;">
                        按字母
                    </div>
                    <div style="flex: 1; text-align: center; font-size: 14px; color: var(--text-secondary); padding-bottom: 8px;">
                        常用联系人
                    </div>
                </div>
                <div class="list">
                    <div class="list-item">
                        <div class="avatar" style="background-color: var(--primary-color);">总</div>
                        <div class="item-content">
                            <div class="item-title">总裁办</div>
                            <div class="item-desc">15人</div>
                        </div>
                        <div class="item-right">
                            <i class="fas fa-angle-right" style="color: var(--text-secondary);"></i>
                        </div>
                    </div>
                    <div class="list-item">
                        <div class="avatar" style="background-color: var(--success-color);">研</div>
                        <div class="item-content">
                            <div class="item-title">研发部</div>
                            <div class="item-desc">38人</div>
                        </div>
                        <div class="item-right">
                            <i class="fas fa-angle-right" style="color: var(--text-secondary);"></i>
                        </div>
                    </div>
                    <div class="list-item">
                        <div class="avatar" style="background-color: var(--warning-color);">市</div>
                        <div class="item-content">
                            <div class="item-title">市场部</div>
                            <div class="item-desc">25人</div>
                        </div>
                        <div class="item-right">
                            <i class="fas fa-angle-right" style="color: var(--text-secondary);"></i>
                        </div>
                    </div>
                    <div class="list-item">
                        <div class="avatar" style="background-color: var(--error-color);">销</div>
                        <div class="item-content">
                            <div class="item-title">销售部</div>
                            <div class="item-desc">42人</div>
                        </div>
                        <div class="item-right">
                            <i class="fas fa-angle-right" style="color: var(--text-secondary);"></i>
                        </div>
                    </div>
                    <div class="list-item">
                        <div class="avatar" style="background-color: var(--primary-color);">人</div>
                        <div class="item-content">
                            <div class="item-title">人力资源部</div>
                            <div class="item-desc">12人</div>
                        </div>
                        <div class="item-right">
                            <i class="fas fa-angle-right" style="color: var(--text-secondary);"></i>
                        </div>
                    </div>
                    <div class="list-item">
                        <div class="avatar" style="background-color: var(--success-color);">财</div>
                        <div class="item-content">
                            <div class="item-title">财务部</div>
                            <div class="item-desc">18人</div>
                        </div>
                        <div class="item-right">
                            <i class="fas fa-angle-right" style="color: var(--text-secondary);"></i>
                        </div>
                    </div>
                    <div class="list-item">
                        <div class="avatar" style="background-color: var(--warning-color);">行</div>
                        <div class="item-content">
                            <div class="item-title">行政部</div>
                            <div class="item-desc">10人</div>
                        </div>
                        <div class="item-right">
                            <i class="fas fa-angle-right" style="color: var(--text-secondary);"></i>
                        </div>
                    </div>
                </div>
                <!-- 底部导航 -->
                <div class="bottom-nav">
                    <div class="nav-item">
                        <i class="fas fa-home nav-icon"></i>
                        <span>首页</span>
                    </div>
                    <div class="nav-item">
                        <i class="fas fa-clipboard-list nav-icon"></i>
                        <span>工作</span>
                    </div>
                    <div class="nav-item">
                        <i class="fas fa-comment nav-icon"></i>
                        <span>消息</span>
                    </div>
                    <div class="nav-item active">
                        <i class="fas fa-user nav-icon"></i>
                        <span>我的</span>
                    </div>
                </div>
            </div>
            
            <!-- 个人信息界面 -->
            <div class="prototype">
                <div class="prototype-title">个人信息</div>
                <div class="app-header">
                    <div class="back-button"><i class="fas fa-arrow-left"></i></div>
                    <div class="header-title">个人信息</div>
                    <div class="header-action"></div>
                </div>
                <div style="flex: 1; overflow-y: auto; background-color: #f5f5f5;">
                    <div style="background-color: white; padding: 20px; display: flex; align-items: center; border-bottom: 1px solid var(--border-color);">
                        <div class="avatar" style="width: 70px; height: 70px; font-size: 24px; background-color: var(--primary-color);">张</div>
                        <div style="margin-left: 15px; flex: 1;">
                            <div style="font-size: 18px; font-weight: bold; margin-bottom: 5px;">张总监</div>
                            <div style="color: var(--text-secondary);">研发部 · 技术总监</div>
                        </div>
                        <div>
                            <i class="fas fa-qrcode" style="font-size: 20px; color: var(--text-secondary);"></i>
                        </div>
                    </div>
                    
                    <div class="card" style="margin-top: 15px;">
                        <div class="card-header">基本信息</div>
                        <div class="card-body" style="padding: 0;">
                            <div class="list-item">
                                <div style="width: 80px; color: var(--text-secondary);">手机号码</div>
                                <div style="flex: 1;">13812345678</div>
                                <div><i class="fas fa-phone" style="color: var(--primary-color);"></i></div>
                            </div>
                            <div class="list-item">
                                <div style="width: 80px; color: var(--text-secondary);">邮箱</div>
                                <div style="flex: 1;">zhang@company.com</div>
                                <div><i class="fas fa-envelope" style="color: var(--primary-color);"></i></div>
                            </div>
                            <div class="list-item">
                                <div style="width: 80px; color: var(--text-secondary);">工号</div>
                                <div style="flex: 1;">RD10086</div>
                            </div>
                            <div class="list-item">
                                <div style="width: 80px; color: var(--text-secondary);">部门</div>
                                <div style="flex: 1;">研发部</div>
                            </div>
                            <div class="list-item" style="border-bottom: none;">
                                <div style="width: 80px; color: var(--text-secondary);">职位</div>
                                <div style="flex: 1;">技术总监</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">部门信息</div>
                        <div class="card-body" style="padding: 0;">
                            <div class="list-item">
                                <div style="width: 80px; color: var(--text-secondary);">上级主管</div>
                                <div style="flex: 1; display: flex; align-items: center;">
                                    <div class="avatar" style="width: 30px; height: 30px; background-color: var(--warning-color); margin-right: 8px;">赵</div>
                                    赵部长（研发部经理）
                                </div>
                                <div><i class="fas fa-angle-right" style="color: var(--text-secondary);"></i></div>
                            </div>
                            <div class="list-item" style="border-bottom: none;">
                                <div style="width: 80px; color: var(--text-secondary);">下属团队</div>
                                <div style="flex: 1;">开发组、测试组（29人）</div>
                                <div><i class="fas fa-angle-right" style="color: var(--text-secondary);"></i></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 文件管理模块 -->
        <h2 class="section-title">文件管理</h2>
        <p class="section-desc">企业文档中心及文件共享管理</p>
        <div class="prototype-container">
            <!-- 文件中心列表界面 -->
            <div class="prototype">
                <div class="prototype-title">文件中心</div>
                <div class="app-header">
                    <div class="back-button"><i class="fas fa-arrow-left"></i></div>
                    <div class="header-title">文件中心</div>
                    <div class="header-action"><i class="fas fa-upload"></i></div>
                </div>
                <div class="search-bar">
                    <i class="fas fa-search search-icon"></i>
                    <input type="text" class="search-input" placeholder="搜索文件">
                </div>
                <div style="background-color: white; display: flex; padding: 12px 0; border-bottom: 1px solid var(--border-color);">
                    <div style="flex: 1; text-align: center; font-size: 14px; color: var(--primary-color); border-bottom: 2px solid var(--primary-color); padding-bottom: 8px;">
                        全部文件
                    </div>
                    <div style="flex: 1; text-align: center; font-size: 14px; color: var(--text-secondary); padding-bottom: 8px;">
                        共享给我
                    </div>
                    <div style="flex: 1; text-align: center; font-size: 14px; color: var(--text-secondary); padding-bottom: 8px;">
                        我的收藏
                    </div>
                </div>
                <div class="list">
                    <div class="file-item">
                        <div class="file-icon"><i class="fas fa-folder" style="color: var(--warning-color);"></i></div>
                        <div class="file-info">
                            <div class="file-name">公司规章制度</div>
                            <div class="file-meta">5个文件 · 2025-03-10</div>
                        </div>
                        <div class="item-right">
                            <i class="fas fa-ellipsis-v" style="color: var(--text-secondary);"></i>
                        </div>
                    </div>
                    <div class="file-item">
                        <div class="file-icon"><i class="fas fa-folder" style="color: var(--warning-color);"></i></div>
                        <div class="file-info">
                            <div class="file-name">项目资料</div>
                            <div class="file-meta">12个文件 · 2025-04-02</div>
                        </div>
                        <div class="item-right">
                            <i class="fas fa-ellipsis-v" style="color: var(--text-secondary);"></i>
                        </div>
                    </div>
                    <div class="file-item">
                        <div class="file-icon"><i class="fas fa-folder" style="color: var(--warning-color);"></i></div>
                        <div class="file-info">
                            <div class="file-name">会议记录</div>
                            <div class="file-meta">8个文件 · 2025-04-05</div>
                        </div>
                        <div class="item-right">
                            <i class="fas fa-ellipsis-v" style="color: var(--text-secondary);"></i>
                        </div>
                    </div>
                    <div class="file-item">
                        <div class="file-icon"><i class="fas fa-file-word" style="color: var(--primary-color);"></i></div>
                        <div class="file-info">
                            <div class="file-name">季度工作总结.docx</div>
                            <div class="file-meta">568KB · 2025-04-06</div>
                        </div>
                        <div class="item-right">
                            <i class="fas fa-ellipsis-v" style="color: var(--text-secondary);"></i>
                        </div>
                    </div>
                    <div class="file-item">
                        <div class="file-icon"><i class="fas fa-file-excel" style="color: var(--success-color);"></i></div>
                        <div class="file-info">
                            <div class="file-name">销售数据分析.xlsx</div>
                            <div class="file-meta">1.2MB · 2025-04-05</div>
                        </div>
                        <div class="item-right">
                            <i class="fas fa-ellipsis-v" style="color: var(--text-secondary);"></i>
                        </div>
                    </div>
                    <div class="file-item">
                        <div class="file-icon"><i class="fas fa-file-powerpoint" style="color: var(--error-color);"></i></div>
                        <div class="file-info">
                            <div class="file-name">产品路线规划.pptx</div>
                            <div class="file-meta">4.5MB · 2025-04-03</div>
                        </div>
                        <div class="item-right">
                            <i class="fas fa-ellipsis-v" style="color: var(--text-secondary);"></i>
                        </div>
                    </div>
                    <div class="file-item">
                        <div class="file-icon"><i class="fas fa-file-pdf" style="color: #ff5722;"></i></div>
                        <div class="file-info">
                            <div class="file-name">合同模板.pdf</div>
                            <div class="file-meta">825KB · 2025-03-28</div>
                        </div>
                        <div class="item-right">
                            <i class="fas fa-ellipsis-v" style="color: var(--text-secondary);"></i>
                        </div>
                    </div>
                </div>
                <!-- 底部导航 -->
                <div class="bottom-nav">
                    <div class="nav-item">
                        <i class="fas fa-home nav-icon"></i>
                        <span>首页</span>
                    </div>
                    <div class="nav-item">
                        <i class="fas fa-clipboard-list nav-icon"></i>
                        <span>工作</span>
                    </div>
                    <div class="nav-item">
                        <i class="fas fa-comment nav-icon"></i>
                        <span>消息</span>
                    </div>
                    <div class="nav-item active">
                        <i class="fas fa-user nav-icon"></i>
                        <span>我的</span>
                    </div>
                </div>
            </div>
            
            <!-- 文件详情界面 -->
            <div class="prototype">
                <div class="prototype-title">文件详情</div>
                <div class="app-header">
                    <div class="back-button"><i class="fas fa-arrow-left"></i></div>
                    <div class="header-title">文件详情</div>
                    <div class="header-action"><i class="fas fa-ellipsis-v"></i></div>
                </div>
                <div style="flex: 1; overflow-y: auto; background-color: #f5f5f5;">
                    <div style="background-color: white; padding: 20px; margin-bottom: 15px; text-align: center;">
                        <div style="width: 80px; height: 80px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center;">
                            <i class="fas fa-file-powerpoint" style="font-size: 60px; color: var(--error-color);"></i>
                        </div>
                        <div style="font-size: 18px; margin-bottom: 5px;">产品路线规划.pptx</div>
                        <div style="color: var(--text-secondary); font-size: 14px;">4.5MB · 2025-04-03 上传</div>
                        <div style="display: flex; justify-content: space-around; margin-top: 20px;">
                            <div style="text-align: center; color: var(--primary-color);">
                                <i class="fas fa-download" style="font-size: 24px; margin-bottom: 8px; display: block;"></i>
                                <span>下载</span>
                            </div>
                            <div style="text-align: center; color: var(--primary-color);">
                                <i class="fas fa-share-alt" style="font-size: 24px; margin-bottom: 8px; display: block;"></i>
                                <span>分享</span>
                            </div>
                            <div style="text-align: center; color: var(--primary-color);">
                                <i class="fas fa-edit" style="font-size: 24px; margin-bottom: 8px; display: block;"></i>
                                <span>编辑</span>
                            </div>
                            <div style="text-align: center; color: var(--primary-color);">
                                <i class="fas fa-trash-alt" style="font-size: 24px; margin-bottom: 8px; display: block;"></i>
                                <span>删除</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">文件信息</div>
                        <div class="card-body" style="padding: 0;">
                            <div class="list-item">
                                <div style="width: 80px; color: var(--text-secondary);">创建者</div>
                                <div style="flex: 1; display: flex; align-items: center;">
                                    <div class="avatar" style="width: 30px; height: 30px; background-color: var(--primary-color); margin-right: 8px;">王</div>
                                    王产品
                                </div>
                            </div>
                            <div class="list-item">
                                <div style="width: 80px; color: var(--text-secondary);">创建时间</div>
                                <div style="flex: 1;">2025-04-01 14:30</div>
                            </div>
                            <div class="list-item">
                                <div style="width: 80px; color: var(--text-secondary);">修改者</div>
                                <div style="flex: 1; display: flex; align-items: center;">
                                    <div class="avatar" style="width: 30px; height: 30px; background-color: var(--warning-color); margin-right: 8px;">张</div>
                                    张总监（您）
                                </div>
                            </div>
                            <div class="list-item">
                                <div style="width: 80px; color: var(--text-secondary);">修改时间</div>
                                <div style="flex: 1;">2025-04-03 09:15</div>
                            </div>
                            <div class="list-item" style="border-bottom: none;">
                                <div style="width: 80px; color: var(--text-secondary);">所属部门</div>
                                <div style="flex: 1;">研发部</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">权限设置</div>
                        <div class="card-body" style="padding: 0;">
                            <div class="list-item">
                                <div style="width: 80px; color: var(--text-secondary);">共享给</div>
                                <div style="flex: 1;">研发部全员</div>
                                <div><i class="fas fa-angle-right" style="color: var(--text-secondary);"></i></div>
                            </div>
                            <div class="list-item" style="border-bottom: none;">
                                <div style="width: 80px; color: var(--text-secondary);">权限</div>
                                <div style="flex: 1;">可查看、可下载</div>
                                <div><i class="fas fa-angle-right" style="color: var(--text-secondary);"></i></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 文件共享设置界面 -->
            <div class="prototype">
                <div class="prototype-title">共享设置</div>
                <div class="app-header">
                    <div class="back-button"><i class="fas fa-arrow-left"></i></div>
                    <div class="header-title">共享设置</div>
                    <div class="header-action"></div>
                </div>
                <div style="flex: 1; overflow-y: auto; background-color: #f5f5f5; padding: 15px;">
                    <div class="card">
                        <div class="card-header">文件信息</div>
                        <div class="card-body">
                            <div style="display: flex; align-items: center; margin-bottom: 15px;">
                                <i class="fas fa-file-powerpoint" style="font-size: 36px; color: var(--error-color); margin-right: 15px;"></i>
                                <div>
                                    <div class="file-name">产品路线规划.pptx</div>
                                    <div class="file-meta">4.5MB · 2025-04-03 上传</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">共享范围</div>
                        <div class="card-body">
                            <div class="form">
                                <div class="form-item" style="margin-bottom: 20px;">
                                    <label style="display: flex; align-items: center; margin-bottom: 10px;">
                                        <input type="radio" name="share-scope" style="margin-right: 8px;" checked>
                                        <span>按部门共享</span>
                                    </label>
                                    <div style="margin-left: 20px;">
                                        <select class="form-select">
                                            <option>研发部全员</option>
                                            <option>研发部-产品组</option>
                                            <option>研发部-开发组</option>
                                            <option>研发部-测试组</option>
                                            <option>市场部全员</option>
                                            <option>销售部全员</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-item" style="margin-bottom: 20px;">
                                    <label style="display: flex; align-items: center; margin-bottom: 10px;">
                                        <input type="radio" name="share-scope" style="margin-right: 8px;">
                                        <span>按人员共享</span>
                                    </label>
                                    <div style="margin-left: 20px; display: flex; align-items: center; color: var(--text-secondary);">
                                        <span>已选择0人</span>
                                        <button class="btn" style="margin-left: 10px; height: 30px; padding: 0 10px; background-color: #f5f5f5;">选择</button>
                                    </div>
                                </div>
                                <div class="form-item">
                                    <label style="display: flex; align-items: center;">
                                        <input type="radio" name="share-scope" style="margin-right: 8px;">
                                        <span>公开给全公司</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">权限设置</div>
                        <div class="card-body">
                            <div class="form">
                                <div class="form-item" style="margin-bottom: 10px;">
                                    <label style="display: flex; align-items: center;">
                                        <input type="checkbox" style="margin-right: 8px;" checked>
                                        <span>可查看</span>
                                    </label>
                                </div>
                                <div class="form-item" style="margin-bottom: 10px;">
                                    <label style="display: flex; align-items: center;">
                                        <input type="checkbox" style="margin-right: 8px;" checked>
                                        <span>可下载</span>
                                    </label>
                                </div>
                                <div class="form-item" style="margin-bottom: 10px;">
                                    <label style="display: flex; align-items: center;">
                                        <input type="checkbox" style="margin-right: 8px;">
                                        <span>可编辑</span>
                                    </label>
                                </div>
                                <div class="form-item">
                                    <label style="display: flex; align-items: center;">
                                        <input type="checkbox" style="margin-right: 8px;">
                                        <span>可删除</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="padding: 15px; background-color: white; border-top: 1px solid var(--border-color);">
                    <button class="btn btn-primary btn-block">保存</button>
                </div>
            </div>
        </div>
        
        <!-- 系统设置模块 -->
        <h2 class="section-title">系统设置</h2>
        <p class="section-desc">个人账户管理与系统配置界面</p>
        <div class="prototype-container">
            <!-- 个人中心界面 -->
            <div class="prototype">
                <div class="prototype-title">个人中心</div>
                <div class="app-header">
                    <div class="back-button"><i class="fas fa-arrow-left"></i></div>
                    <div class="header-title">个人中心</div>
                    <div class="header-action"></div>
                </div>
                <div style="flex: 1; overflow-y: auto; background-color: #f5f5f5;">
                    <div style="background-color: white; padding: 20px; display: flex; align-items: center; margin-bottom: 15px;">
                        <div class="avatar" style="width: 70px; height: 70px; font-size: 24px; background-color: var(--primary-color);">张</div>
                        <div style="margin-left: 15px; flex: 1;">
                            <div style="font-size: 18px; font-weight: bold; margin-bottom: 5px;">张总监</div>
                            <div style="color: var(--text-secondary);">研发部 · 技术总监</div>
                        </div>
                        <div>
                            <i class="fas fa-angle-right" style="color: var(--text-secondary);"></i>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-body" style="padding: 0;">
                            <div class="list-item">
                                <div style="display: flex; align-items: center;">
                                    <i class="fas fa-clipboard-list" style="color: var(--primary-color); width: 24px; margin-right: 10px;"></i>
                                    <span>我的申请</span>
                                </div>
                                <div class="item-right">
                                    <i class="fas fa-angle-right" style="color: var(--text-secondary);"></i>
                                </div>
                            </div>
                            <div class="list-item">
                                <div style="display: flex; align-items: center;">
                                    <i class="fas fa-tasks" style="color: var(--primary-color); width: 24px; margin-right: 10px;"></i>
                                    <span>待办事项</span>
                                </div>
                                <div class="item-right">
                                    <span class="tag tag-red">3</span>
                                    <i class="fas fa-angle-right" style="color: var(--text-secondary); margin-left: 5px;"></i>
                                </div>
                            </div>
                            <div class="list-item">
                                <div style="display: flex; align-items: center;">
                                    <i class="fas fa-calendar-alt" style="color: var(--primary-color); width: 24px; margin-right: 10px;"></i>
                                    <span>我的日程</span>
                                </div>
                                <div class="item-right">
                                    <i class="fas fa-angle-right" style="color: var(--text-secondary);"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-body" style="padding: 0;">
                            <div class="list-item">
                                <div style="display: flex; align-items: center;">
                                    <i class="fas fa-bell" style="color: var(--primary-color); width: 24px; margin-right: 10px;"></i>
                                    <span>消息通知</span>
                                </div>
                                <div class="item-right">
                                    <i class="fas fa-angle-right" style="color: var(--text-secondary);"></i>
                                </div>
                            </div>
                            <div class="list-item">
                                <div style="display: flex; align-items: center;">
                                    <i class="fas fa-shield-alt" style="color: var(--primary-color); width: 24px; margin-right: 10px;"></i>
                                    <span>账号安全</span>
                                </div>
                                <div class="item-right">
                                    <i class="fas fa-angle-right" style="color: var(--text-secondary);"></i>
                                </div>
                            </div>
                            <div class="list-item">
                                <div style="display: flex; align-items: center;">
                                    <i class="fas fa-palette" style="color: var(--primary-color); width: 24px; margin-right: 10px;"></i>
                                    <span>主题设置</span>
                                </div>
                                <div class="item-right">
                                    <i class="fas fa-angle-right" style="color: var(--text-secondary);"></i>
                                </div>
                            </div>
                            <div class="list-item">
                                <div style="display: flex; align-items: center;">
                                    <i class="fas fa-cog" style="color: var(--primary-color); width: 24px; margin-right: 10px;"></i>
                                    <span>系统设置</span>
                                </div>
                                <div class="item-right">
                                    <i class="fas fa-angle-right" style="color: var(--text-secondary);"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-body" style="padding: 0;">
                            <div class="list-item">
                                <div style="display: flex; align-items: center;">
                                    <i class="fas fa-question-circle" style="color: var(--primary-color); width: 24px; margin-right: 10px;"></i>
                                    <span>帮助中心</span>
                                </div>
                                <div class="item-right">
                                    <i class="fas fa-angle-right" style="color: var(--text-secondary);"></i>
                                </div>
                            </div>
                            <div class="list-item">
                                <div style="display: flex; align-items: center;">
                                    <i class="fas fa-info-circle" style="color: var(--primary-color); width: 24px; margin-right: 10px;"></i>
                                    <span>关于我们</span>
                                </div>
                                <div class="item-right">
                                    <span style="font-size: 12px; color: var(--text-secondary);">v1.0.0</span>
                                    <i class="fas fa-angle-right" style="color: var(--text-secondary); margin-left: 5px;"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div style="padding: 15px;">
                        <button class="btn btn-block" style="background-color: #f5f5f5; color: var(--text-primary);">退出登录</button>
                    </div>
                </div>
                <!-- 底部导航 -->
                <div class="bottom-nav">
                    <div class="nav-item">
                        <i class="fas fa-home nav-icon"></i>
                        <span>首页</span>
                    </div>
                    <div class="nav-item">
                        <i class="fas fa-clipboard-list nav-icon"></i>
                        <span>工作</span>
                    </div>
                    <div class="nav-item">
                        <i class="fas fa-comment nav-icon"></i>
                        <span>消息</span>
                    </div>
                    <div class="nav-item active">
                        <i class="fas fa-user nav-icon"></i>
                        <span>我的</span>
                    </div>
                </div>
            </div>
            
            <!-- 系统设置界面 -->
            <div class="prototype">
                <div class="prototype-title">系统设置</div>
                <div class="app-header">
                    <div class="back-button"><i class="fas fa-arrow-left"></i></div>
                    <div class="header-title">系统设置</div>
                    <div class="header-action"></div>
                </div>
                <div style="flex: 1; overflow-y: auto; background-color: #f5f5f5;">
                    <div class="card">
                        <div class="card-header">通用设置</div>
                        <div class="card-body" style="padding: 0;">
                            <div class="list-item">
                                <div>字体大小</div>
                                <div class="item-right">
                                    <span style="color: var(--text-secondary);">默认</span>
                                    <i class="fas fa-angle-right" style="color: var(--text-secondary); margin-left: 5px;"></i>
                                </div>
                            </div>
                            <div class="list-item">
                                <div>默认首页</div>
                                <div class="item-right">
                                    <span style="color: var(--text-secondary);">工作台</span>
                                    <i class="fas fa-angle-right" style="color: var(--text-secondary); margin-left: 5px;"></i>
                                </div>
                            </div>
                            <div class="list-item">
                                <div>语言设置</div>
                                <div class="item-right">
                                    <span style="color: var(--text-secondary);">简体中文</span>
                                    <i class="fas fa-angle-right" style="color: var(--text-secondary); margin-left: 5px;"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">消息设置</div>
                        <div class="card-body" style="padding: 0;">
                            <div class="list-item">
                                <div>新消息通知</div>
                                <div class="item-right">
                                    <label class="switch">
                                        <input type="checkbox" checked>
                                        <span class="slider round"></span>
                                    </label>
                                </div>
                            </div>
                            <div class="list-item">
                                <div>声音提醒</div>
                                <div class="item-right">
                                    <label class="switch">
                                        <input type="checkbox" checked>
                                        <span class="slider round"></span>
                                    </label>
                                </div>
                            </div>
                            <div class="list-item">
                                <div>震动提醒</div>
                                <div class="item-right">
                                    <label class="switch">
                                        <input type="checkbox">
                                        <span class="slider round"></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">流量与存储</div>
                        <div class="card-body" style="padding: 0;">
                            <div class="list-item">
                                <div>自动下载附件</div>
                                <div class="item-right">
                                    <span style="color: var(--text-secondary);">仅WIFI</span>
                                    <i class="fas fa-angle-right" style="color: var(--text-secondary); margin-left: 5px;"></i>
                                </div>
                            </div>
                            <div class="list-item">
                                <div>存储空间管理</div>
                                <div class="item-right">
                                    <span style="color: var(--text-secondary);">256MB已用</span>
                                    <i class="fas fa-angle-right" style="color: var(--text-secondary); margin-left: 5px;"></i>
                                </div>
                            </div>
                            <div class="list-item">
                                <div>清除缓存</div>
                                <div class="item-right">
                                    <span style="color: var(--text-secondary);">36.5MB</span>
                                    <i class="fas fa-angle-right" style="color: var(--text-secondary); margin-left: 5px;"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 账号安全界面 -->
            <div class="prototype">
                <div class="prototype-title">账号安全</div>
                <div class="app-header">
                    <div class="back-button"><i class="fas fa-arrow-left"></i></div>
                    <div class="header-title">账号安全</div>
                    <div class="header-action"></div>
                </div>
                <div style="flex: 1; overflow-y: auto; background-color: #f5f5f5;">
                    <div class="card">
                        <div class="card-body" style="padding: 0;">
                            <div class="list-item">
                                <div>
                                    <div>修改密码</div>
                                    <div style="font-size: 12px; color: var(--text-secondary);">建议定期修改密码，确保账号安全</div>
                                </div>
                                <div class="item-right">
                                    <i class="fas fa-angle-right" style="color: var(--text-secondary);"></i>
                                </div>
                            </div>
                            <div class="list-item">
                                <div>
                                    <div>手机绑定</div>
                                    <div style="font-size: 12px; color: var(--text-secondary);">已绑定：138****5678</div>
                                </div>
                                <div class="item-right">
                                    <i class="fas fa-angle-right" style="color: var(--text-secondary);"></i>
                                </div>
                            </div>
                            <div class="list-item">
                                <div>
                                    <div>邮箱绑定</div>
                                    <div style="font-size: 12px; color: var(--text-secondary);">已绑定：zhang@company.com</div>
                                </div>
                                <div class="item-right">
                                    <i class="fas fa-angle-right" style="color: var(--text-secondary);"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">安全设置</div>
                        <div class="card-body" style="padding: 0;">
                            <div class="list-item">
                                <div>登录验证</div>
                                <div class="item-right">
                                    <label class="switch">
                                        <input type="checkbox" checked>
                                        <span class="slider round"></span>
                                    </label>
                                </div>
                            </div>
                            <div class="list-item">
                                <div>指纹解锁</div>
                                <div class="item-right">
                                    <label class="switch">
                                        <input type="checkbox" checked>
                                        <span class="slider round"></span>
                                    </label>
                                </div>
                            </div>
                            <div class="list-item">
                                <div>人脸识别</div>
                                <div class="item-right">
                                    <label class="switch">
                                        <input type="checkbox">
                                        <span class="slider round"></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">登录管理</div>
                        <div class="card-body" style="padding: 0;">
                            <div class="list-item">
                                <div>会话管理</div>
                                <div class="item-right">
                                    <i class="fas fa-angle-right" style="color: var(--text-secondary);"></i>
                                </div>
                            </div>
                            <div class="list-item" style="color: var(--error-color);">
                                <div>退出所有设备</div>
                                <div class="item-right">
                                    <i class="fas fa-angle-right" style="color: var(--text-secondary);"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 流程设计模块 -->
        <h2 class="section-title">流程设计器</h2>
        <p class="section-desc">可视化拖拽设计审批流程</p>
        <div class="prototype-container">
            <!-- 流程设计界面 -->
            <div class="prototype">
                <div class="prototype-title">流程设计器</div>
                <div class="app-header">
                    <div class="back-button"><i class="fas fa-arrow-left"></i></div>
                    <div class="header-title">请假流程设计</div>
                    <div class="header-action"><i class="fas fa-save"></i></div>
                </div>
                <div class="workflow-designer">
                    <div class="workflow-canvas">
                        <!-- 起始节点 -->
                        <div class="workflow-node" style="top: 50px; left: 120px;">
                            <div class="workflow-node-header">
                                <div class="workflow-node-icon" style="background-color: rgba(24, 144, 255, 0.1); color: var(--primary-color);">
                                    <i class="fas fa-play"></i>
                                </div>
                                <div>开始</div>
                            </div>
                            <div class="workflow-node-body">
                                发起人：李经理
                            </div>
                        </div>
                        
                        <!-- 部门审批节点 -->
                        <div class="workflow-node" style="top: 150px; left: 120px;">
                            <div class="workflow-node-header">
                                <div class="workflow-node-icon" style="background-color: rgba(82, 196, 26, 0.1); color: var(--success-color);">
                                    <i class="fas fa-user-check"></i>
                                </div>
                                <div>审批人</div>
                            </div>
                            <div class="workflow-node-body">
                                直接上级审批
                            </div>
                        </div>
                        
                        <!-- 条件分支节点 -->
                        <div class="workflow-node" style="top: 250px; left: 120px;">
                            <div class="workflow-node-header">
                                <div class="workflow-node-icon" style="background-color: rgba(250, 173, 20, 0.1); color: var(--warning-color);">
                                    <i class="fas fa-code-branch"></i>
                                </div>
                                <div>条件</div>
                            </div>
                            <div class="workflow-node-body">
                                请假天数 > 3天
                            </div>
                        </div>
                        
                        <!-- 总监审批节点 -->
                        <div class="workflow-node" style="top: 350px; left: 50px;">
                            <div class="workflow-node-header">
                                <div class="workflow-node-icon" style="background-color: rgba(82, 196, 26, 0.1); color: var(--success-color);">
                                    <i class="fas fa-user-check"></i>
                                </div>
                                <div>审批人</div>
                            </div>
                            <div class="workflow-node-body">
                                部门总监审批
                            </div>
                        </div>
                        
                        <!-- HR审批节点 -->
                        <div class="workflow-node" style="top: 350px; left: 190px;">
                            <div class="workflow-node-header">
                                <div class="workflow-node-icon" style="background-color: rgba(82, 196, 26, 0.1); color: var(--success-color);">
                                    <i class="fas fa-user-check"></i>
                                </div>
                                <div>审批人</div>
                            </div>
                            <div class="workflow-node-body">
                                HR审批
                            </div>
                        </div>
                        
                        <!-- 抄送节点 -->
                        <div class="workflow-node" style="top: 450px; left: 120px;">
                            <div class="workflow-node-header">
                                <div class="workflow-node-icon" style="background-color: rgba(24, 144, 255, 0.1); color: var(--primary-color);">
                                    <i class="fas fa-paper-plane"></i>
                                </div>
                                <div>抄送</div>
                            </div>
                            <div class="workflow-node-body">
                                抄送HR部门
                            </div>
                        </div>
                        
                        <!-- 结束节点 -->
                        <div class="workflow-node" style="top: 550px; left: 120px;">
                            <div class="workflow-node-header">
                                <div class="workflow-node-icon" style="background-color: rgba(245, 82, 45, 0.1); color: var(--error-color);">
                                    <i class="fas fa-stop"></i>
                                </div>
                                <div>结束</div>
                            </div>
                            <div class="workflow-node-body">
                                流程结束
                            </div>
                        </div>
                        
                        <!-- 连接线 -->
                        <div class="workflow-connector" style="top: 100px; left: 180px; width: 2px; height: 50px; transform: rotate(90deg);"></div>
                        <div class="workflow-connector" style="top: 200px; left: 180px; width: 2px; height: 50px; transform: rotate(90deg);"></div>
                        <div class="workflow-connector" style="top: 300px; left: 110px; width: 2px; height: 50px; transform: rotate(90deg);"></div>
                        <div class="workflow-connector" style="top: 300px; left: 250px; width: 2px; height: 50px; transform: rotate(90deg);"></div>
                        <div class="workflow-connector" style="top: 400px; left: 180px; width: 2px; height: 50px; transform: rotate(90deg);"></div>
                        <div class="workflow-connector" style="top: 500px; left: 180px; width: 2px; height: 50px; transform: rotate(90deg);"></div>
                    </div>
                    
                    <!-- 工具箱 -->
                    <div class="workflow-toolbox" style="top: 60px; right: 10px;">
                        <div class="workflow-toolbox-title">流程组件</div>
                        <div class="workflow-toolbox-item">
                            <div class="workflow-toolbox-icon" style="background-color: rgba(24, 144, 255, 0.1); color: var(--primary-color);">
                                <i class="fas fa-play"></i>
                            </div>
                            <div class="workflow-toolbox-text">开始节点</div>
                        </div>
                        <div class="workflow-toolbox-item">
                            <div class="workflow-toolbox-icon" style="background-color: rgba(82, 196, 26, 0.1); color: var(--success-color);">
                                <i class="fas fa-user-check"></i>
                            </div>
                            <div class="workflow-toolbox-text">审批人</div>
                        </div>
                        <div class="workflow-toolbox-item">
                            <div class="workflow-toolbox-icon" style="background-color: rgba(250, 173, 20, 0.1); color: var(--warning-color);">
                                <i class="fas fa-code-branch"></i>
                            </div>
                            <div class="workflow-toolbox-text">条件分支</div>
                        </div>
                        <div class="workflow-toolbox-item">
                            <div class="workflow-toolbox-icon" style="background-color: rgba(24, 144, 255, 0.1); color: var(--primary-color);">
                                <i class="fas fa-paper-plane"></i>
                            </div>
                            <div class="workflow-toolbox-text">抄送</div>
                        </div>
                        <div class="workflow-toolbox-item">
                            <div class="workflow-toolbox-icon" style="background-color: rgba(82, 196, 26, 0.1); color: var(--success-color);">
                                <i class="fas fa-robot"></i>
                            </div>
                            <div class="workflow-toolbox-text">自动处理</div>
                        </div>
                        <div class="workflow-toolbox-item">
                            <div class="workflow-toolbox-icon" style="background-color: rgba(245, 82, 45, 0.1); color: var(--error-color);">
                                <i class="fas fa-stop"></i>
                            </div>
                            <div class="workflow-toolbox-text">结束节点</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 流程配置界面 -->
            <div class="prototype">
                <div class="prototype-title">节点配置</div>
                <div class="app-header">
                    <div class="back-button"><i class="fas fa-arrow-left"></i></div>
                    <div class="header-title">审批节点配置</div>
                    <div class="header-action"><i class="fas fa-check"></i></div>
                </div>
                <div style="flex: 1; overflow-y: auto; background-color: #f5f5f5; padding: 15px;">
                    <div class="card">
                        <div class="card-header">基本信息</div>
                        <div class="card-body">
                            <div class="form">
                                <div class="form-item">
                                    <label class="form-label">节点名称</label>
                                    <input type="text" class="form-input" placeholder="请输入节点名称" value="部门总监审批">
                                </div>
                                <div class="form-item">
                                    <label class="form-label">节点类型</label>
                                    <select class="form-select">
                                        <option>审批节点</option>
                                        <option>条件节点</option>
                                        <option>抄送节点</option>
                                        <option>自动节点</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">审批人设置</div>
                        <div class="card-body">
                            <div class="form">
                                <div class="form-item" style="margin-bottom: 20px;">
                                    <label style="display: flex; align-items: center; margin-bottom: 10px;">
                                        <input type="radio" name="approver-type" style="margin-right: 8px;" checked>
                                        <span>指定成员</span>
                                    </label>
                                    <div style="margin-left: 20px; display: flex; align-items: center; color: var(--text-secondary);">
                                        <span>已选择：张总监</span>
                                        <button class="btn" style="margin-left: 10px; height: 30px; padding: 0 10px; background-color: #f5f5f5;">选择</button>
                                    </div>
                                </div>
                                <div class="form-item" style="margin-bottom: 20px;">
                                    <label style="display: flex; align-items: center; margin-bottom: 10px;">
                                        <input type="radio" name="approver-type" style="margin-right: 8px;">
                                        <span>主管</span>
                                    </label>
                                    <div style="margin-left: 20px;">
                                        <select class="form-select">
                                            <option>直接主管</option>
                                            <option>部门主管</option>
                                            <option>连续多级主管</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-item">
                                    <label style="display: flex; align-items: center;">
                                        <input type="radio" name="approver-type" style="margin-right: 8px;">
                                        <span>角色</span>
                                    </label>
                                    <div style="margin-left: 20px;">
                                        <select class="form-select">
                                            <option>部门经理</option>
                                            <option>技术总监</option>
                                            <option>人事专员</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">高级设置</div>
                        <div class="card-body">
                            <div class="form">
                                <div class="form-item" style="margin-bottom: 10px;">
                                    <label style="display: flex; align-items: center;">
                                        <input type="checkbox" style="margin-right: 8px;" checked>
                                        <span>允许退回</span>
                                    </label>
                                </div>
                                <div class="form-item" style="margin-bottom: 10px;">
                                    <label style="display: flex; align-items: center;">
                                        <input type="checkbox" style="margin-right: 8px;" checked>
                                        <span>允许加签</span>
                                    </label>
                                </div>
                                <div class="form-item" style="margin-bottom: 10px;">
                                    <label style="display: flex; justify-content: space-between; align-items: center;">
                                        <span>审批期限</span>
                                        <label class="switch">
                                            <input type="checkbox">
                                            <span class="slider round"></span>
                                        </label>
                                    </label>
                                </div>
                                <div class="form-item">
                                    <label style="display: flex; justify-content: space-between; align-items: center;">
                                        <span>审批人为空时</span>
                                        <select class="form-select" style="width: auto;">
                                            <option>自动通过</option>
                                            <option>自动转交管理员</option>
                                        </select>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="padding: 15px; background-color: white; border-top: 1px solid var(--border-color);">
                    <button class="btn btn-primary btn-block">保存配置</button>
                </div>
            </div>
            
            <!-- 流程列表界面 -->
            <div class="prototype">
                <div class="prototype-title">流程管理</div>
                <div class="app-header">
                    <div class="back-button"><i class="fas fa-arrow-left"></i></div>
                    <div class="header-title">流程管理</div>
                    <div class="header-action"><i class="fas fa-plus"></i></div>
                </div>
                <div class="search-bar">
                    <i class="fas fa-search search-icon"></i>
                    <input type="text" class="search-input" placeholder="搜索流程">
                </div>
                <div style="background-color: white; display: flex; padding: 12px 0; border-bottom: 1px solid var(--border-color);">
                    <div style="flex: 1; text-align: center; font-size: 14px; color: var(--primary-color); border-bottom: 2px solid var(--primary-color); padding-bottom: 8px;">
                        全部流程
                    </div>
                    <div style="flex: 1; text-align: center; font-size: 14px; color: var(--text-secondary); padding-bottom: 8px;">
                        我创建的
                    </div>
                    <div style="flex: 1; text-align: center; font-size: 14px; color: var(--text-secondary); padding-bottom: 8px;">
                        待发布
                    </div>
                </div>
                <div class="list">
                    <div class="list-item">
                        <div style="width: 40px; height: 40px; background-color: rgba(24, 144, 255, 0.1); color: var(--primary-color); display: flex; align-items: center; justify-content: center; border-radius: 8px; margin-right: 12px;">
                            <i class="fas fa-file-alt"></i>
                        </div>
                        <div class="item-content">
                            <div class="item-title">请假流程</div>
                            <div class="item-desc">适用范围：全公司 · 版本：v2.1</div>
                        </div>
                        <div class="item-right">
                            <span class="tag tag-green">已发布</span>
                        </div>
                    </div>
                    <div class="list-item">
                        <div style="width: 40px; height: 40px; background-color: rgba(82, 196, 26, 0.1); color: var(--success-color); display: flex; align-items: center; justify-content: center; border-radius: 8px; margin-right: 12px;">
                            <i class="fas fa-file-invoice-dollar"></i>
                        </div>
                        <div class="item-content">
                            <div class="item-title">报销流程</div>
                            <div class="item-desc">适用范围：全公司 · 版本：v1.5</div>
                        </div>
                        <div class="item-right">
                            <span class="tag tag-green">已发布</span>
                        </div>
                    </div>
                    <div class="list-item">
                        <div style="width: 40px; height: 40px; background-color: rgba(250, 173, 20, 0.1); color: var(--warning-color); display: flex; align-items: center; justify-content: center; border-radius: 8px; margin-right: 12px;">
                            <i class="fas fa-shopping-cart"></i>
                        </div>
                        <div class="item-content">
                            <div class="item-title">采购流程</div>
                            <div class="item-desc">适用范围：行政部、采购部 · 版本：v1.0</div>
                        </div>
                        <div class="item-right">
                            <span class="tag tag-green">已发布</span>
                        </div>
                    </div>
                    <div class="list-item">
                        <div style="width: 40px; height: 40px; background-color: rgba(245, 82, 45, 0.1); color: var(--error-color); display: flex; align-items: center; justify-content: center; border-radius: 8px; margin-right: 12px;">
                            <i class="fas fa-user-plus"></i>
                        </div>
                        <div class="item-content">
                            <div class="item-title">入职审批流程</div>
                            <div class="item-desc">适用范围：人力资源部 · 版本：v2.0</div>
                        </div>
                        <div class="item-right">
                            <span class="tag tag-orange">待完善</span>
                        </div>
                    </div>
                    <div class="list-item">
                        <div style="width: 40px; height: 40px; background-color: rgba(24, 144, 255, 0.1); color: var(--primary-color); display: flex; align-items: center; justify-content: center; border-radius: 8px; margin-right: 12px;">
                            <i class="fas fa-building"></i>
                        </div>
                        <div class="item-content">
                            <div class="item-title">出差申请流程</div>
                            <div class="item-desc">适用范围：全公司 · 版本：草稿</div>
                        </div>
                        <div class="item-right">
                            <span class="tag tag-blue">草稿</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 高级条件配置界面 -->
            <div class="prototype">
                <div class="prototype-title">高级条件配置</div>
                <div class="app-header">
                    <div class="back-button"><i class="fas fa-arrow-left"></i></div>
                    <div class="header-title">条件节点配置</div>
                    <div class="header-action"><i class="fas fa-check"></i></div>
                </div>
                <div style="flex: 1; overflow-y: auto; background-color: #f5f5f5; padding: 15px;">
                    <div class="card">
                        <div class="card-header">基本信息</div>
                        <div class="card-body">
                            <div class="form">
                                <div class="form-item">
                                    <label class="form-label">节点名称</label>
                                    <input type="text" class="form-input" placeholder="请输入节点名称" value="请假条件分支">
                                </div>
                                <div class="form-item">
                                    <label class="form-label">描述</label>
                                    <textarea class="form-input" placeholder="请输入节点描述">根据请假天数和请假类型进行分支判断</textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">条件表达式</div>
                        <div class="card-body">
                            <div class="form-item" style="margin-bottom: 10px;">
                                <label style="display: flex; align-items: center; margin-bottom: 10px;">
                                    <input type="radio" name="condition-type" style="margin-right: 8px;" checked>
                                    <span>可视化配置</span>
                                </label>
                            </div>
                            
                            <div class="condition-builder">
                                <div class="condition-row">
                                    <div class="condition-field">
                                        <select class="form-select">
                                            <option>请假天数</option>
                                            <option>请假类型</option>
                                            <option>申请人职级</option>
                                            <option>部门</option>
                                        </select>
                                    </div>
                                    <div class="condition-operator">
                                        <select class="form-select">
                                            <option>大于</option>
                                            <option>小于</option>
                                            <option>等于</option>
                                            <option>不等于</option>
                                        </select>
                                    </div>
                                    <div class="condition-value">
                                        <input type="text" class="form-input" value="3">
                                    </div>
                                    <div class="condition-actions">
                                        <i class="fas fa-trash-alt" style="color: var(--text-secondary); cursor: pointer;"></i>
                                    </div>
                                </div>
                                
                                <div class="condition-row">
                                    <div class="condition-field">
                                        <select class="form-select">
                                            <option>请假类型</option>
                                            <option>请假天数</option>
                                            <option>申请人职级</option>
                                            <option>部门</option>
                                        </select>
                                    </div>
                                    <div class="condition-operator">
                                        <select class="form-select">
                                            <option>等于</option>
                                            <option>不等于</option>
                                            <option>包含</option>
                                            <option>不包含</option>
                                        </select>
                                    </div>
                                    <div class="condition-value">
                                        <select class="form-select">
                                            <option>年假</option>
                                            <option>事假</option>
                                            <option>病假</option>
                                            <option>婚假</option>
                                        </select>
                                    </div>
                                    <div class="condition-actions">
                                        <i class="fas fa-trash-alt" style="color: var(--text-secondary); cursor: pointer;"></i>
                                    </div>
                                </div>
                                
                                <div style="margin-top: 10px;">
                                    <button class="btn" style="background-color: #f5f5f5; font-size: 13px;">
                                        <i class="fas fa-plus" style="margin-right: 5px;"></i> 添加条件
                                    </button>
                                    <div style="margin-top: 10px; display: flex; align-items: center;">
                                        <span style="margin-right: 10px;">条件关系</span>
                                        <select class="form-select" style="width: auto;">
                                            <option>满足所有条件 (AND)</option>
                                            <option>满足任一条件 (OR)</option>
                                            <option>自定义组合</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="form-item" style="margin-top: 20px;">
                                <label style="display: flex; align-items: center; margin-bottom: 10px;">
                                    <input type="radio" name="condition-type" style="margin-right: 8px;">
                                    <span>表达式编辑</span>
                                </label>
                                <textarea class="form-input" placeholder="请输入表达式" style="font-family: monospace; height: 100px;">days > 3 && type == "年假"</textarea>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">分支配置</div>
                        <div class="card-body">
                            <div class="form-item">
                                <label class="form-label">条件满足时</label>
                                <select class="form-select">
                                    <option>转部门总监审批</option>
                                    <option>转HR审批</option>
                                    <option>自动通过</option>
                                    <option>自动拒绝</option>
                                </select>
                            </div>
                            <div class="form-item">
                                <label class="form-label">条件不满足时</label>
                                <select class="form-select">
                                    <option>转HR审批</option>
                                    <option>转部门总监审批</option>
                                    <option>自动通过</option>
                                    <option>自动拒绝</option>
                                </select>
                            </div>
                            <div class="form-item">
                                <label style="display: flex; align-items: center;">
                                    <input type="checkbox" style="margin-right: 8px;">
                                    <span>设置默认分支</span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="padding: 15px; background-color: white; border-top: 1px solid var(--border-color);">
                    <button class="btn btn-primary btn-block">保存配置</button>
                </div>
            </div>
            
            <!-- 高级工作流变量设置界面 -->
            <div class="prototype">
                <div class="prototype-title">工作流变量</div>
                <div class="app-header">
                    <div class="back-button"><i class="fas fa-arrow-left"></i></div>
                    <div class="header-title">流程变量配置</div>
                    <div class="header-action"><i class="fas fa-plus"></i></div>
                </div>
                <div class="workflow-panel-tabs">
                    <div class="workflow-panel-tab active">流程变量</div>
                    <div class="workflow-panel-tab">表单字段</div>
                    <div class="workflow-panel-tab">系统变量</div>
                </div>
                <div style="flex: 1; overflow-y: auto; background-color: #f5f5f5; padding: 15px;">
                    <div class="search-bar" style="margin: -15px -15px 15px -15px;">
                        <i class="fas fa-search search-icon"></i>
                        <input type="text" class="search-input" placeholder="搜索变量">
                    </div>
                    
                    <div class="workflow-variable">
                        <div class="workflow-variable-icon" style="color: var(--primary-color);">
                            <i class="fas fa-calendar-alt"></i>
                        </div>
                        <div class="workflow-variable-content">
                            <div class="workflow-variable-name">days</div>
                            <div class="workflow-variable-type">数字 | 请假天数</div>
                        </div>
                        <div>
                            <i class="fas fa-ellipsis-v" style="color: var(--text-secondary);"></i>
                        </div>
                    </div>
                    
                    <div class="workflow-variable">
                        <div class="workflow-variable-icon" style="color: var(--success-color);">
                            <i class="fas fa-tags"></i>
                        </div>
                        <div class="workflow-variable-content">
                            <div class="workflow-variable-name">type</div>
                            <div class="workflow-variable-type">字符串 | 请假类型</div>
                        </div>
                        <div>
                            <i class="fas fa-ellipsis-v" style="color: var(--text-secondary);"></i>
                        </div>
                    </div>
                    
                    <div class="workflow-variable">
                        <div class="workflow-variable-icon" style="color: var(--warning-color);">
                            <i class="fas fa-user"></i>
                        </div>
                        <div class="workflow-variable-content">
                            <div class="workflow-variable-name">applicant</div>
                            <div class="workflow-variable-type">对象 | 申请人信息</div>
                        </div>
                        <div>
                            <i class="fas fa-ellipsis-v" style="color: var(--text-secondary);"></i>
                        </div>
                    </div>
                    
                    <div class="workflow-variable">
                        <div class="workflow-variable-icon" style="color: var(--error-color);">
                            <i class="fas fa-building"></i>
                        </div>
                        <div class="workflow-variable-content">
                            <div class="workflow-variable-name">department</div>
                            <div class="workflow-variable-type">字符串 | 申请部门</div>
                        </div>
                        <div>
                            <i class="fas fa-ellipsis-v" style="color: var(--text-secondary);"></i>
                        </div>
                    </div>
                    
                    <div class="workflow-variable">
                        <div class="workflow-variable-icon" style="color: var(--primary-color);">
                            <i class="fas fa-file-alt"></i>
                        </div>
                        <div class="workflow-variable-content">
                            <div class="workflow-variable-name">reason</div>
                            <div class="workflow-variable-type">字符串 | 请假原因</div>
                        </div>
                        <div>
                            <i class="fas fa-ellipsis-v" style="color: var(--text-secondary);"></i>
                        </div>
                    </div>
                    
                    <div class="workflow-variable">
                        <div class="workflow-variable-icon" style="color: var(--success-color);">
                            <i class="fas fa-calendar-check"></i>
                        </div>
                        <div class="workflow-variable-content">
                            <div class="workflow-variable-name">startDate</div>
                            <div class="workflow-variable-type">日期 | 开始时间</div>
                        </div>
                        <div>
                            <i class="fas fa-ellipsis-v" style="color: var(--text-secondary);"></i>
                        </div>
                    </div>
                    
                    <div class="workflow-variable">
                        <div class="workflow-variable-icon" style="color: var(--warning-color);">
                            <i class="fas fa-calendar-times"></i>
                        </div>
                        <div class="workflow-variable-content">
                            <div class="workflow-variable-name">endDate</div>
                            <div class="workflow-variable-type">日期 | 结束时间</div>
                        </div>
                        <div>
                            <i class="fas fa-ellipsis-v" style="color: var(--text-secondary);"></i>
                        </div>
                    </div>
                </div>
                
                <!-- 变量属性面板 -->
                <div class="workflow-property-panel" style="bottom: 15px; right: 15px;">
                    <div class="workflow-panel-header">
                        <div>变量属性</div>
                        <i class="fas fa-times" style="cursor: pointer;"></i>
                    </div>
                    <div class="workflow-panel-body">
                        <div class="form">
                            <div class="form-item">
                                <label class="form-label">变量名称</label>
                                <input type="text" class="form-input" value="days">
                            </div>
                            <div class="form-item">
                                <label class="form-label">显示名称</label>
                                <input type="text" class="form-input" value="请假天数">
                            </div>
                            <div class="form-item">
                                <label class="form-label">数据类型</label>
                                <select class="form-select">
                                    <option>数字</option>
                                    <option>字符串</option>
                                    <option>布尔值</option>
                                    <option>日期</option>
                                    <option>对象</option>
                                    <option>数组</option>
                                </select>
                            </div>
                            <div class="form-item">
                                <label class="form-label">默认值</label>
                                <input type="text" class="form-input" value="0">
                            </div>
                            <div class="form-item">
                                <label class="form-label">描述</label>
                                <textarea class="form-input">员工申请的请假天数</textarea>
                            </div>
                            <div class="form-item">
                                <label style="display: flex; align-items: center;">
                                    <input type="checkbox" style="margin-right: 8px;" checked>
                                    <span>在条件中可用</span>
                                </label>
                            </div>
                            <div class="form-item">
                                <label style="display: flex; align-items: center;">
                                    <input type="checkbox" style="margin-right: 8px;" checked>
                                    <span>必填项</span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="workflow-panel-footer">
                        <button class="btn" style="background-color: #f5f5f5;">取消</button>
                        <button class="btn btn-primary">保存</button>
                    </div>
                </div>
            </div>
            
            <!-- 高级工作流触发器界面 -->
            <div class="prototype">
                <div class="prototype-title">流程触发器</div>
                <div class="app-header">
                    <div class="back-button"><i class="fas fa-arrow-left"></i></div>
                    <div class="header-title">触发器设置</div>
                    <div class="header-action"><i class="fas fa-plus"></i></div>
                </div>
                <div style="flex: 1; overflow-y: auto; background-color: #f5f5f5; padding: 15px;">
                    <div class="card">
                        <div class="card-header">已配置触发器</div>
                        <div class="card-body">
                            <div class="trigger-setup">
                                <div class="trigger-header">
                                    <div class="trigger-title">
                                        <i class="fas fa-bell" style="color: var(--primary-color); margin-right: 5px;"></i> 
                                        超时提醒
                                    </div>
                                    <div>
                                        <label class="switch">
                                            <input type="checkbox" checked>
                                            <span class="slider round"></span>
                                        </label>
                                    </div>
                                </div>
                                <div class="trigger-content">
                                    <div style="font-size: 13px; color: var(--text-secondary); margin-bottom: 10px;">
                                        当审批节点超过24小时未处理时，发送邮件提醒相关审批人
                                    </div>
                                    <div style="text-align: right;">
                                        <button class="btn" style="background-color: #f5f5f5; font-size: 13px; padding: 0 10px; height: 30px;">编辑</button>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="trigger-setup">
                                <div class="trigger-header">
                                    <div class="trigger-title">
                                        <i class="fas fa-exchange-alt" style="color: var(--success-color); margin-right: 5px;"></i> 
                                        自动转交
                                    </div>
                                    <div>
                                        <label class="switch">
                                            <input type="checkbox" checked>
                                            <span class="slider round"></span>
                                        </label>
                                    </div>
                                </div>
                                <div class="trigger-content">
                                    <div style="font-size: 13px; color: var(--text-secondary); margin-bottom: 10px;">
                                        当审批人休假时，自动将审批任务转交给其上级主管
                                    </div>
                                    <div style="text-align: right;">
                                        <button class="btn" style="background-color: #f5f5f5; font-size: 13px; padding: 0 10px; height: 30px;">编辑</button>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="trigger-setup">
                                <div class="trigger-header">
                                    <div class="trigger-title">
                                        <i class="fas fa-code" style="color: var(--warning-color); margin-right: 5px;"></i> 
                                        外部系统集成
                                    </div>
                                    <div>
                                        <label class="switch">
                                            <input type="checkbox">
                                            <span class="slider round"></span>
                                        </label>
                                    </div>
                                </div>
                                <div class="trigger-content">
                                    <div style="font-size: 13px; color: var(--text-secondary); margin-bottom: 10px;">
                                        流程完成后，调用HR系统API同步请假记录
                                    </div>
                                    <div style="text-align: right;">
                                        <button class="btn" style="background-color: #f5f5f5; font-size: 13px; padding: 0 10px; height: 30px;">编辑</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">触发器类型</div>
                        <div class="card-body" style="padding: 0;">
                            <div class="list-item">
                                <div style="width: 40px; height: 40px; background-color: rgba(24, 144, 255, 0.1); color: var(--primary-color); display: flex; align-items: center; justify-content: center; border-radius: 8px; margin-right: 12px;">
                                    <i class="fas fa-bell"></i>
                                </div>
                                <div class="item-content">
                                    <div class="item-title">提醒通知</div>
                                    <div class="item-desc">邮件、短信、站内消息等提醒</div>
                                </div>
                                <div class="item-right">
                                    <i class="fas fa-angle-right" style="color: var(--text-secondary);"></i>
                                </div>
                            </div>
                            <div class="list-item">
                                <div style="width: 40px; height: 40px; background-color: rgba(82, 196, 26, 0.1); color: var(--success-color); display: flex; align-items: center; justify-content: center; border-radius: 8px; margin-right: 12px;">
                                    <i class="fas fa-exchange-alt"></i>
                                </div>
                                <div class="item-content">
                                    <div class="item-title">流程控制</div>
                                    <div class="item-desc">自动转交、超时处理、跳过节点等</div>
                                </div>
                                <div class="item-right">
                                    <i class="fas fa-angle-right" style="color: var(--text-secondary);"></i>
                                </div>
                            </div>
                            <div class="list-item">
                                <div style="width: 40px; height: 40px; background-color: rgba(250, 173, 20, 0.1); color: var(--warning-color); display: flex; align-items: center; justify-content: center; border-radius: 8px; margin-right: 12px;">
                                    <i class="fas fa-code"></i>
                                </div>
                                <div class="item-content">
                                    <div class="item-title">外部系统集成</div>
                                    <div class="item-desc">调用API、数据同步、自定义脚本</div>
                                </div>
                                <div class="item-right">
                                    <i class="fas fa-angle-right" style="color: var(--text-secondary);"></i>
                                </div>
                            </div>
                            <div class="list-item">
                                <div style="width: 40px; height: 40px; background-color: rgba(245, 82, 45, 0.1); color: var(--error-color); display: flex; align-items: center; justify-content: center; border-radius: 8px; margin-right: 12px;">
                                    <i class="fas fa-calendar-alt"></i>
                                </div>
                                <div class="item-content">
                                    <div class="item-title">定时任务</div>
                                    <div class="item-desc">定时执行、周期性任务</div>
                                </div>
                                <div class="item-right">
                                    <i class="fas fa-angle-right" style="color: var(--text-secondary);"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 流程执行历史界面 -->
            <div class="prototype">
                <div class="prototype-title">流程执行历史</div>
                <div class="app-header">
                    <div class="back-button"><i class="fas fa-arrow-left"></i></div>
                    <div class="header-title">流程执行记录</div>
                    <div class="header-action"><i class="fas fa-filter"></i></div>
                </div>
                <div class="search-bar">
                    <i class="fas fa-search search-icon"></i>
                    <input type="text" class="search-input" placeholder="搜索执行记录">
                </div>
                <div style="flex: 1; overflow-y: auto; background-color: #f5f5f5; padding: 15px;">
                    <div style="background-color: white; padding: 15px; border-radius: 8px; margin-bottom: 15px;">
                        <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                            <div style="font-weight: bold;">李经理的请假申请</div>
                            <div><span class="tag tag-green">已完成</span></div>
                        </div>
                        <div style="margin-bottom: 10px;">
                            <div style="font-size: 13px; color: var(--text-secondary);">
                                实例ID: LEAVE-2025040701
                            </div>
                            <div style="font-size: 13px; color: var(--text-secondary);">
                                开始时间: 2025-04-07 10:30 | 结束时间: 2025-04-07 15:45
                            </div>
                        </div>
                        <div class="timeline-view">
                            <div class="timeline-item">
                                <div class="timeline-dot"></div>
                                <div class="timeline-content">
                                    <div style="display: flex; justify-content: space-between;">
                                        <div style="font-weight: bold;">提交申请</div>
                                        <div style="color: var(--success-color);"><i class="fas fa-check-circle"></i> 已完成</div>
                                    </div>
                                    <div style="font-size: 13px;">李经理提交了请假申请</div>
                                    <div class="timeline-time">2025-04-07 10:30</div>
                                </div>
                            </div>
                            <div class="timeline-item">
                                <div class="timeline-dot"></div>
                                <div class="timeline-content">
                                    <div style="display: flex; justify-content: space-between;">
                                        <div style="font-weight: bold;">直接上级审批</div>
                                        <div style="color: var(--success-color);"><i class="fas fa-check-circle"></i> 已通过</div>
                                    </div>
                                    <div style="font-size: 13px;">赵部长审批通过了申请</div>
                                    <div style="font-size: 13px; font-style: italic; color: var(--text-secondary); margin-top: 5px;">
                                        "同意，请安排好工作交接。"
                                    </div>
                                    <div class="timeline-time">2025-04-07 11:45</div>
                                </div>
                            </div>
                            <div class="timeline-item">
                                <div class="timeline-dot"></div>
                                <div class="timeline-content">
                                    <div style="display: flex; justify-content: space-between;">
                                        <div style="font-weight: bold;">条件判断</div>
                                        <div style="color: var(--primary-color);"><i class="fas fa-code-branch"></i> 已路由</div>
                                    </div>
                                    <div style="font-size: 13px;">条件【请假天数 > 3】不满足，路由到HR审批</div>
                                    <div class="timeline-time">2025-04-07 11:46</div>
                                </div>
                            </div>
                            <div class="timeline-item">
                                <div class="timeline-dot"></div>
                                <div class="timeline-content">
                                    <div style="display: flex; justify-content: space-between;">
                                        <div style="font-weight: bold;">HR审批</div>
                                        <div style="color: var(--success-color);"><i class="fas fa-check-circle"></i> 已通过</div>
                                    </div>
                                    <div style="font-size: 13px;">王HR审批通过了申请</div>
                                    <div style="font-size: 13px; font-style: italic; color: var(--text-secondary); margin-top: 5px;">
                                        "年假余额充足，同意申请。"
                                    </div>
                                    <div class="timeline-time">2025-04-07 14:20</div>
                                </div>
                            </div>
                            <div class="timeline-item">
                                <div class="timeline-dot"></div>
                                <div class="timeline-content">
                                    <div style="display: flex; justify-content: space-between;">
                                        <div style="font-weight: bold;">系统处理</div>
                                        <div style="color: var(--success-color);"><i class="fas fa-check-circle"></i> 已完成</div>
                                    </div>
                                    <div style="font-size: 13px;">系统更新请假记录，扣减年假余额</div>
                                    <div class="timeline-time">2025-04-07 14:21</div>
                                </div>
                            </div>
                            <div class="timeline-item">
                                <div class="timeline-dot"></div>
                                <div class="timeline-content">
                                    <div style="display: flex; justify-content: space-between;">
                                        <div style="font-weight: bold;">流程结束</div>
                                        <div style="color: var(--success-color);"><i class="fas fa-check-circle"></i> 已完成</div>
                                    </div>
                                    <div style="font-size: 13px;">请假申请已通过，流程结束</div>
                                    <div class="timeline-time">2025-04-07 14:22</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div style="background-color: white; padding: 15px; border-radius: 8px; margin-bottom: 15px;">
                        <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                            <div style="font-weight: bold;">王总的报销申请</div>
                            <div><span class="tag tag-blue">进行中</span></div>
                        </div>
                        <div style="margin-bottom: 10px;">
                            <div style="font-size: 13px; color: var(--text-secondary);">
                                实例ID: EXPENSE-2025040601
                            </div>
                            <div style="font-size: 13px; color: var(--text-secondary);">
                                开始时间: 2025-04-06 15:20 | 当前步骤: 财务审核
                            </div>
                        </div>
                        <div class="timeline-view">
                            <div class="timeline-item">
                                <div class="timeline-dot"></div>
                                <div class="timeline-content">
                                    <div style="display: flex; justify-content: space-between;">
                                        <div style="font-weight: bold;">提交申请</div>
                                        <div style="color: var(--success-color);"><i class="fas fa-check-circle"></i> 已完成</div>
                                    </div>
                                    <div style="font-size: 13px;">王总提交了报销申请</div>
                                    <div class="timeline-time">2025-04-06 15:20</div>
                                </div>
                            </div>
                            <div class="timeline-item">
                                <div class="timeline-dot"></div>
                                <div class="timeline-content">
                                    <div style="display: flex; justify-content: space-between;">
                                        <div style="font-weight: bold;">部门经理审批</div>
                                        <div style="color: var(--success-color);"><i class="fas fa-check-circle"></i> 已通过</div>
                                    </div>
                                    <div style="font-size: 13px;">赵经理审批通过了申请</div>
                                    <div style="font-size: 13px; font-style: italic; color: var(--text-secondary); margin-top: 5px;">
                                        "差旅费用合理，同意报销。"
                                    </div>
                                    <div class="timeline-time">2025-04-06 16:40</div>
                                </div>
                            </div>
                            <div class="timeline-item">
                                <div class="timeline-dot"></div>
                                <div class="timeline-content">
                                    <div style="display: flex; justify-content: space-between;">
                                        <div style="font-weight: bold;">财务审核</div>
                                        <div style="color: var(--primary-color);"><i class="fas fa-clock"></i> 审核中</div>
                                    </div>
                                    <div style="font-size: 13px;">等待财务部李会计审核</div>
                                    <div class="timeline-time">2025-04-06 16:41</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 邮件系统模块 -->
        <h2 class="section-title">邮件系统</h2>
        <p class="section-desc">内部邮件的收发、管理和归档</p>
        <div class="prototype-container">
            <!-- 邮件列表界面 -->
            <div class="prototype">
                <div class="prototype-title">邮件列表</div>
                <div class="app-header">
                    <div style="width: 24px;"></div>
                    <div class="header-title">收件箱</div>
                    <div class="header-action"><i class="fas fa-edit"></i></div>
                </div>
                <div class="search-bar">
                    <i class="fas fa-search search-icon"></i>
                    <input type="text" class="search-input" placeholder="搜索邮件">
                </div>
                <div class="workflow-panel-tabs">
                    <div class="workflow-panel-tab active">收件箱</div>
                    <div class="workflow-panel-tab">发件箱</div>
                    <div class="workflow-panel-tab">草稿箱</div>
                </div>
                <div style="flex: 1; overflow-y: auto;">
                    <div class="mail-item unread">
                        <div class="mail-avatar">Z</div>
                        <div class="mail-content">
                            <div class="mail-header">
                                <div class="mail-sender">赵总监</div>
                                <div class="mail-time">10:15</div>
                            </div>
                            <div class="mail-subject">关于Q2季度工作计划的讨论</div>
                            <div class="mail-preview">各位部门负责人，请于下周一前提交Q2季度工作计划，并准备在月度会议上...</div>
                        </div>
                    </div>
                    
                    <div class="mail-item unread">
                        <div class="mail-avatar" style="background-color: var(--success-color);">W</div>
                        <div class="mail-content">
                            <div class="mail-header">
                                <div class="mail-sender">王经理</div>
                                <div class="mail-time">昨天</div>
                            </div>
                            <div class="mail-subject">新员工入职通知</div>
                            <div class="mail-preview">各位同事，下周一将有两名新员工入职技术部，请做好相关准备工作...</div>
                        </div>
                    </div>
                    
                    <div class="mail-item">
                        <div class="mail-avatar" style="background-color: var(--warning-color);">L</div>
                        <div class="mail-content">
                            <div class="mail-header">
                                <div class="mail-sender">李主管</div>
                                <div class="mail-time">3月25日</div>
                            </div>
                            <div class="mail-subject">项目周报 - 第12周</div>
                            <div class="mail-preview">附件为本周的项目进度报告，请查收并提出意见。本周我们完成了...</div>
                        </div>
                    </div>
                    
                    <div class="mail-item">
                        <div class="mail-avatar" style="background-color: var(--error-color);">C</div>
                        <div class="mail-content">
                            <div class="mail-header">
                                <div class="mail-sender">陈工程师</div>
                                <div class="mail-time">3月23日</div>
                            </div>
                            <div class="mail-subject">服务器维护通知</div>
                            <div class="mail-preview">公司服务器将于本周六凌晨2:00-5:00进行例行维护，届时部分系统...</div>
                        </div>
                    </div>
                    
                    <div class="mail-item">
                        <div class="mail-avatar" style="background-color: #6b7a99;">H</div>
                        <div class="mail-content">
                            <div class="mail-header">
                                <div class="mail-sender">黄设计师</div>
                                <div class="mail-time">3月20日</div>
                            </div>
                            <div class="mail-subject">新产品UI设计初稿</div>
                            <div class="mail-preview">根据上周的讨论，我们完成了新产品的UI设计初稿，附件为效果图，请查看...</div>
                        </div>
                    </div>
                </div>
                <div class="bottom-nav">
                    <div class="nav-item active">
                        <div class="nav-icon"><i class="fas fa-envelope"></i></div>
                        <div>邮件</div>
                    </div>
                    <div class="nav-item">
                        <div class="nav-icon"><i class="fas fa-address-book"></i></div>
                        <div>通讯录</div>
                    </div>
                    <div class="nav-item">
                        <div class="nav-icon"><i class="fas fa-cog"></i></div>
                        <div>设置</div>
                    </div>
                </div>
            </div>
            
            <!-- 邮件详情界面 -->
            <div class="prototype">
                <div class="prototype-title">邮件详情</div>
                <div class="app-header">
                    <div class="back-button"><i class="fas fa-arrow-left"></i></div>
                    <div class="header-title">邮件详情</div>
                    <div class="header-action"><i class="fas fa-ellipsis-v"></i></div>
                </div>
                <div style="flex: 1; overflow-y: auto;">
                    <div class="mail-detail-header">
                        <div class="mail-detail-subject">关于Q2季度工作计划的讨论</div>
                        <div class="mail-detail-info">
                            <div class="mail-avatar" style="width: 32px; height: 32px; font-size: 14px;">Z</div>
                            <div style="margin-left: 10px; flex: 1;">
                                <div style="display: flex; justify-content: space-between;">
                                    <div>
                                        <span style="font-weight: bold;">赵总监</span>
                                        <span style="font-size: 12px; color: var(--text-secondary);">&lt;zhao@company.com&gt;</span>
                                    </div>
                                    <div style="font-size: 12px; color: var(--text-secondary);">今天 10:15</div>
                                </div>
                                <div style="font-size: 12px; color: var(--text-secondary); margin-top: 3px;">
                                    发送至：我、王经理、李主管、陈工程师 +3
                                </div>
                            </div>
                        </div>
                        <div style="display: flex; gap: 8px; margin-top: 15px;">
                            <div class="mail-attachment">
                                <div class="mail-attachment-icon"><i class="fas fa-file-excel"></i></div>
                                <div class="mail-attachment-name">Q2工作计划模板.xlsx</div>
                                <div class="mail-attachment-size">56KB</div>
                                <div class="mail-attachment-action"><i class="fas fa-download"></i></div>
                            </div>
                            <div class="mail-attachment">
                                <div class="mail-attachment-icon"><i class="fas fa-file-pdf"></i></div>
                                <div class="mail-attachment-name">Q1季度工作总结报告.pdf</div>
                                <div class="mail-attachment-size">2.3MB</div>
                                <div class="mail-attachment-action"><i class="fas fa-download"></i></div>
                            </div>
                        </div>
                    </div>
                    <div class="mail-detail-body">
                        <p>各位部门负责人：</p>
                        <p style="margin-top: 15px;">根据公司年度计划安排，现需要各部门开始准备第二季度工作计划。请根据附件模板填写并于下周一（4月1日）前提交至我的邮箱。</p>
                        <p style="margin-top: 15px;">同时，Q1季度工作总结报告也已经整理完毕，请各位查阅并准备在下周三（4月3日）的月度例会上进行部门工作汇报。</p>
                        <p style="margin-top: 15px;">如有任何问题，请随时与我联系。</p>
                        <p style="margin-top: 25px;">此致</p>
                        <p>赵明</p>
                        <p>运营总监</p>
                        <p>电话：+86 138 8888 8888</p>
                    </div>
                </div>
                <div class="mail-actions" style="padding: 15px; border-top: 1px solid var(--border-color); display: flex; justify-content: space-between;">
                    <div style="display: flex; gap: 15px;">
                        <div class="mail-action-button"><i class="fas fa-reply"></i></div>
                        <div class="mail-action-button"><i class="fas fa-reply-all"></i></div>
                        <div class="mail-action-button"><i class="fas fa-forward"></i></div>
                    </div>
                    <div style="display: flex; gap: 15px;">
                        <div class="mail-action-button"><i class="fas fa-trash-alt"></i></div>
                        <div class="mail-action-button"><i class="fas fa-archive"></i></div>
                        <div class="mail-action-button"><i class="fas fa-flag"></i></div>
                    </div>
                </div>
            </div>
            
            <!-- 邮件撰写界面 -->
            <div class="prototype">
                <div class="prototype-title">撰写邮件</div>
                <div class="app-header">
                    <div class="back-button"><i class="fas fa-times"></i></div>
                    <div class="header-title">新邮件</div>
                    <div class="header-action"><i class="fas fa-paper-plane"></i></div>
                </div>
                <div style="flex: 1; overflow-y: auto;">
                    <div class="form" style="padding-bottom: 0;">
                        <div class="form-item">
                            <input type="text" class="form-input" placeholder="收件人" value="zhao@company.com; li@company.com">
                        </div>
                        <div class="form-item">
                            <input type="text" class="form-input" placeholder="抄送">
                        </div>
                        <div class="form-item">
                            <input type="text" class="form-input" placeholder="主题" value="回复：关于Q2季度工作计划的讨论">
                        </div>
                        <hr style="margin: 15px 0; border: none; border-top: 1px solid var(--border-color);">
                    </div>
                    <div style="padding: 0 15px;">
                        <textarea style="width: 100%; border: none; min-height: 250px; outline: none; resize: none; font-family: inherit; font-size: 14px; line-height: 1.6;" placeholder="邮件正文...">赵总监：

收到Q2季度工作计划通知，我们技术部将按照模板要求准备相关文档，并在下周一前提交。

关于Q1季度工作总结，我有一些补充内容想在例会前与您沟通，方便明天下午找您当面讨论一下吗？

此致

李明
技术部经理</textarea>
                    </div>
                </div>
                <div class="mail-compose-footer">
                    <div style="display: flex; gap: 15px;">
                        <div class="mail-action-button"><i class="fas fa-paperclip"></i></div>
                        <div class="mail-action-button"><i class="fas fa-image"></i></div>
                        <div class="mail-action-button"><i class="fas fa-link"></i></div>
                    </div>
                    <div>
                        <div class="mail-action-button"><i class="fas fa-trash-alt"></i></div>
                    </div>
                </div>
            </div>
            
            <!-- 邮件设置界面 -->
            <div class="prototype">
                <div class="prototype-title">邮件设置</div>
                <div class="app-header">
                    <div class="back-button"><i class="fas fa-arrow-left"></i></div>
                    <div class="header-title">邮件设置</div>
                    <div style="width: 24px;"></div>
                </div>
                <div style="flex: 1; overflow-y: auto;">
                    <div class="card" style="margin: 15px;">
                        <div class="card-header">账户信息</div>
                        <div class="card-body">
                            <div class="form-item">
                                <label class="form-label">邮箱地址</label>
                                <input type="text" class="form-input" value="you@company.com" disabled>
                            </div>
                            <div class="form-item">
                                <label class="form-label">显示名称</label>
                                <input type="text" class="form-input" value="李明 (技术部)">
                            </div>
                            <div class="form-item">
                                <label class="form-label">邮件签名</label>
                                <textarea class="form-input">李明
技术部经理
电话：+86 138 1234 5678
邮箱：you@company.com</textarea>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card" style="margin: 0 15px 15px 15px;">
                        <div class="card-header">通知设置</div>
                        <div class="card-body" style="padding: 0;">
                            <div class="list-item">
                                <div class="item-content">
                                    <div class="item-title">新邮件通知</div>
                                    <div class="item-desc">收到新邮件时显示通知</div>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" checked>
                                        <span class="slider round"></span>
                                    </label>
                                </div>
                            </div>
                            <div class="list-item">
                                <div class="item-content">
                                    <div class="item-title">声音提醒</div>
                                    <div class="item-desc">收到新邮件时播放提示音</div>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox">
                                        <span class="slider round"></span>
                                    </label>
                                </div>
                            </div>
                            <div class="list-item">
                                <div class="item-content">
                                    <div class="item-title">自动下载附件</div>
                                    <div class="item-desc">自动下载小于5MB的附件</div>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox">
                                        <span class="slider round"></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card" style="margin: 0 15px 15px 15px;">
                        <div class="card-header">邮件管理</div>
                        <div class="card-body" style="padding: 0;">
                            <div class="list-item">
                                <div class="item-content">
                                    <div class="item-title">邮件类别</div>
                                    <div class="item-desc">管理自定义邮件分类</div>
                                </div>
                                <div class="item-right">
                                    <i class="fas fa-angle-right"></i>
                                </div>
                            </div>
                            <div class="list-item">
                                <div class="item-content">
                                    <div class="item-title">自动回复</div>
                                    <div class="item-desc">设置离开办公室时的自动回复</div>
                                </div>
                                <div class="item-right">
                                    <i class="fas fa-angle-right"></i>
                                </div>
                            </div>
                            <div class="list-item">
                                <div class="item-content">
                                    <div class="item-title">黑名单</div>
                                    <div class="item-desc">管理被屏蔽的邮件地址</div>
                                </div>
                                <div class="item-right">
                                    <i class="fas fa-angle-right"></i>
                                </div>
                            </div>
                            <div class="list-item">
                                <div class="item-content">
                                    <div class="item-title">存储管理</div>
                                    <div class="item-desc">管理邮箱存储空间</div>
                                </div>
                                <div class="item-right">
                                    <i class="fas fa-angle-right"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bottom-nav">
                    <div class="nav-item">
                        <div class="nav-icon"><i class="fas fa-envelope"></i></div>
                        <div>邮件</div>
                    </div>
                    <div class="nav-item">
                        <div class="nav-icon"><i class="fas fa-address-book"></i></div>
                        <div>通讯录</div>
                    </div>
                    <div class="nav-item active">
                        <div class="nav-icon"><i class="fas fa-cog"></i></div>
                        <div>设置</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 打卡签到模块 -->
        <h2 class="section-title">打卡签到</h2>
        <p class="section-desc">员工考勤打卡与签到记录管理</p>
        <div class="prototype-container">
            <!-- 打卡签到主界面 -->
            <div class="prototype">
                <div class="prototype-title">打卡签到主界面</div>
                <div class="app-header">
                    <div style="width: 24px;"></div>
                    <div class="header-title">考勤打卡</div>
                    <div class="header-action"><i class="fas fa-ellipsis-v"></i></div>
                </div>
                <div style="flex: 1; overflow-y: auto; padding: 15px;">
                    <!-- 打卡统计 -->
                    <div class="check-in-stats">
                        <div class="check-in-stat-item">
                            <div class="check-in-stat-value">18</div>
                            <div class="check-in-stat-label">本月出勤</div>
                        </div>
                        <div class="check-in-stat-item">
                            <div class="check-in-stat-value">2</div>
                            <div class="check-in-stat-label">迟到</div>
                        </div>
                        <div class="check-in-stat-item">
                            <div class="check-in-stat-value">1</div>
                            <div class="check-in-stat-label">早退</div>
                        </div>
                    </div>
                    
                    <!-- 打卡按钮 -->
                    <button class="btn btn-primary check-in-btn">
                        <i class="fas fa-fingerprint"></i>
                        下班打卡
                    </button>
                    
                    <!-- 签到日历 -->
                    <div class="check-in-calendar">
                        <div class="calendar-header">
                            <div class="calendar-title">2025年4月</div>
                            <div class="calendar-nav">
                                <div class="calendar-nav-btn"><i class="fas fa-chevron-left"></i></div>
                                <div class="calendar-nav-btn"><i class="fas fa-chevron-right"></i></div>
                            </div>
                        </div>
                        <div class="calendar-grid">
                            <div class="calendar-weekday">一</div>
                            <div class="calendar-weekday">二</div>
                            <div class="calendar-weekday">三</div>
                            <div class="calendar-weekday">四</div>
                            <div class="calendar-weekday">五</div>
                            <div class="calendar-weekday">六</div>
                            <div class="calendar-weekday">日</div>
                            
                            <div class="calendar-day">31</div>
                            <div class="calendar-day current-month checked-in">1</div>
                            <div class="calendar-day current-month checked-in">2</div>
                            <div class="calendar-day current-month checked-in">3</div>
                            <div class="calendar-day current-month checked-in">4</div>
                            <div class="calendar-day current-month">5</div>
                            <div class="calendar-day current-month">6</div>
                            
                            <div class="calendar-day current-month checked-in">7</div>
                            <div class="calendar-day current-month checked-in">8</div>
                            <div class="calendar-day current-month late">9</div>
                            <div class="calendar-day current-month checked-in">10</div>
                            <div class="calendar-day current-month checked-in">11</div>
                            <div class="calendar-day current-month">12</div>
                            <div class="calendar-day current-month">13</div>
                            
                            <div class="calendar-day current-month checked-in">14</div>
                            <div class="calendar-day current-month checked-in">15</div>
                            <div class="calendar-day current-month late">16</div>
                            <div class="calendar-day current-month checked-in">17</div>
                            <div class="calendar-day current-month checked-in">18</div>
                            <div class="calendar-day current-month">19</div>
                            <div class="calendar-day current-month">20</div>
                            
                            <div class="calendar-day current-month checked-in">21</div>
                            <div class="calendar-day current-month checked-in">22</div>
                            <div class="calendar-day current-month today">23</div>
                            <div class="calendar-day current-month">24</div>
                            <div class="calendar-day current-month">25</div>
                            <div class="calendar-day current-month">26</div>
                            <div class="calendar-day current-month">27</div>
                            
                            <div class="calendar-day current-month">28</div>
                            <div class="calendar-day current-month">29</div>
                            <div class="calendar-day current-month">30</div>
                            <div class="calendar-day">1</div>
                            <div class="calendar-day">2</div>
                            <div class="calendar-day">3</div>
                            <div class="calendar-day">4</div>
                        </div>
                    </div>
                    
                    <!-- 最近打卡记录 -->
                    <div style="margin-bottom: 15px;">
                        <div style="font-weight: bold; margin-bottom: 10px;">最近打卡记录</div>
                        <div class="check-in-record">
                            <div class="check-in-record-date">
                                <div class="check-in-record-day">今天 (周二)</div>
                                <div class="check-in-record-status">工作中</div>
                            </div>
                            <div class="check-in-record-time">
                                <div class="check-in-record-in check-in-on-time">上班 08:56</div>
                                <div class="check-in-record-out">下班 --:--</div>
                            </div>
                        </div>
                        <div class="check-in-record">
                            <div class="check-in-record-date">
                                <div class="check-in-record-day">昨天 (周一)</div>
                                <div class="check-in-record-status">正常出勤</div>
                            </div>
                            <div class="check-in-record-time">
                                <div class="check-in-record-in check-in-on-time">上班 08:48</div>
                                <div class="check-in-record-out">下班 18:05</div>
                            </div>
                        </div>
                        <div class="check-in-record">
                            <div class="check-in-record-date">
                                <div class="check-in-record-day">4月19日 (周五)</div>
                                <div class="check-in-record-status">正常出勤</div>
                            </div>
                            <div class="check-in-record-time">
                                <div class="check-in-record-in check-in-on-time">上班 09:02</div>
                                <div class="check-in-record-out">下班 18:15</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bottom-nav">
                    <div class="nav-item active">
                        <div class="nav-icon"><i class="fas fa-fingerprint"></i></div>
                        <div>打卡</div>
                    </div>
                    <div class="nav-item">
                        <div class="nav-icon"><i class="fas fa-calendar-alt"></i></div>
                        <div>记录</div>
                    </div>
                    <div class="nav-item">
                        <div class="nav-icon"><i class="fas fa-user"></i></div>
                        <div>我的</div>
                    </div>
                </div>
            </div>
            
            <!-- 打卡详情界面 -->
            <div class="prototype">
                <div class="prototype-title">打卡详情</div>
                <div class="app-header">
                    <div class="back-button"><i class="fas fa-arrow-left"></i></div>
                    <div class="header-title">打卡成功</div>
                    <div style="width: 24px;"></div>
                </div>
                <div style="flex: 1; display: flex; flex-direction: column; align-items: center; padding: 30px 15px;">
                    <div style="width: 100px; height: 100px; border-radius: 50%; background-color: rgba(82, 196, 26, 0.1); color: var(--success-color); display: flex; align-items: center; justify-content: center; margin-bottom: 20px;">
                        <i class="fas fa-check" style="font-size: 40px;"></i>
                    </div>
                    <div style="font-size: 20px; font-weight: bold; margin-bottom: 10px;">上班打卡成功</div>
                    <div style="font-size: 32px; margin-bottom: 20px;">08:56</div>
                    <div style="color: var(--text-secondary); margin-bottom: 5px;">2025年4月23日 星期二</div>
                    <div style="color: var(--success-color); margin-bottom: 30px;">正常出勤</div>
                    
                    <div style="width: 100%; display: flex; margin-bottom: 20px; padding: 15px; border-radius: 8px; background-color: white; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
                        <div class="location-marker">
                            <i class="fas fa-map-marker-alt"></i>
                        </div>
                        <div>
                            <div style="font-weight: bold; margin-bottom: 5px;">公司总部大楼</div>
                            <div style="font-size: 12px; color: var(--text-secondary);">北京市朝阳区科技园区88号</div>
                        </div>
                    </div>
                    
                    <button class="btn btn-primary" style="width: 200px;">返回首页</button>
                </div>
            </div>
            
            <!-- 打卡记录界面 -->
            <div class="prototype">
                <div class="prototype-title">打卡记录</div>
                <div class="app-header">
                    <div style="width: 24px;"></div>
                    <div class="header-title">考勤记录</div>
                    <div class="header-action"><i class="fas fa-filter"></i></div>
                </div>
                <div class="search-bar">
                    <i class="fas fa-search search-icon"></i>
                    <input type="text" class="search-input" placeholder="搜索日期、状态等">
                </div>
                <div class="workflow-panel-tabs">
                    <div class="workflow-panel-tab active">日视图</div>
                    <div class="workflow-panel-tab">周视图</div>
                    <div class="workflow-panel-tab">月视图</div>
                </div>
                <div style="flex: 1; overflow-y: auto; padding: 15px;">
                    <div style="font-weight: bold; margin-bottom: 15px;">2025年4月</div>
                    
                    <div class="check-in-record">
                        <div class="check-in-record-date">
                            <div class="check-in-record-day">4月23日 (今天)</div>
                            <div class="check-in-record-status">工作中</div>
                        </div>
                        <div class="check-in-record-time">
                            <div class="check-in-record-in check-in-on-time">上班 08:56</div>
                            <div class="check-in-record-out">下班 --:--</div>
                        </div>
                    </div>
                    
                    <div class="check-in-record">
                        <div class="check-in-record-date">
                            <div class="check-in-record-day">4月22日 (周一)</div>
                            <div class="check-in-record-status">正常出勤</div>
                        </div>
                        <div class="check-in-record-time">
                            <div class="check-in-record-in check-in-on-time">上班 08:48</div>
                            <div class="check-in-record-out">下班 18:05</div>
                        </div>
                    </div>
                    
                    <div class="check-in-record">
                        <div class="check-in-record-date">
                            <div class="check-in-record-day">4月19日 (周五)</div>
                            <div class="check-in-record-status">正常出勤</div>
                        </div>
                        <div class="check-in-record-time">
                            <div class="check-in-record-in check-in-on-time">上班 09:02</div>
                            <div class="check-in-record-out">下班 18:15</div>
                        </div>
                    </div>
                    
                    <div class="check-in-record">
                        <div class="check-in-record-date">
                            <div class="check-in-record-day">4月18日 (周四)</div>
                            <div class="check-in-record-status">正常出勤</div>
                        </div>
                        <div class="check-in-record-time">
                            <div class="check-in-record-in check-in-on-time">上班 08:52</div>
                            <div class="check-in-record-out">下班 18:10</div>
                        </div>
                    </div>
                    
                    <div class="check-in-record">
                        <div class="check-in-record-date">
                            <div class="check-in-record-day">4月17日 (周三)</div>
                            <div class="check-in-record-status">正常出勤</div>
                        </div>
                        <div class="check-in-record-time">
                            <div class="check-in-record-in check-in-on-time">上班 08:45</div>
                            <div class="check-in-record-out">下班 18:03</div>
                        </div>
                    </div>
                    
                    <div class="check-in-record">
                        <div class="check-in-record-date">
                            <div class="check-in-record-day">4月16日 (周二)</div>
                            <div class="check-in-record-status">迟到</div>
                        </div>
                        <div class="check-in-record-time">
                            <div class="check-in-record-in check-in-late">上班 09:35</div>
                            <div class="check-in-record-out">下班 18:42</div>
                        </div>
                    </div>
                    
                    <div class="check-in-record">
                        <div class="check-in-record-date">
                            <div class="check-in-record-day">4月15日 (周一)</div>
                            <div class="check-in-record-status">正常出勤</div>
                        </div>
                        <div class="check-in-record-time">
                            <div class="check-in-record-in check-in-on-time">上班 08:50</div>
                            <div class="check-in-record-out">下班 18:08</div>
                        </div>
                    </div>
                </div>
                <div class="bottom-nav">
                    <div class="nav-item">
                        <div class="nav-icon"><i class="fas fa-fingerprint"></i></div>
                        <div>打卡</div>
                    </div>
                    <div class="nav-item active">
                        <div class="nav-icon"><i class="fas fa-calendar-alt"></i></div>
                        <div>记录</div>
                    </div>
                    <div class="nav-item">
                        <div class="nav-icon"><i class="fas fa-user"></i></div>
                        <div>我的</div>
                    </div>
                </div>
            </div>
            
            <!-- 考勤统计界面 -->
            <div class="prototype">
                <div class="prototype-title">考勤统计</div>
                <div class="app-header">
                    <div style="width: 24px;"></div>
                    <div class="header-title">考勤统计</div>
                    <div class="header-action"><i class="fas fa-ellipsis-v"></i></div>
                </div>
                <div class="workflow-panel-tabs">
                    <div class="workflow-panel-tab active">个人</div>
                    <div class="workflow-panel-tab">部门</div>
                    <div class="workflow-panel-tab">团队</div>
                </div>
                <div style="flex: 1; overflow-y: auto; padding: 15px;">
                    <div class="card" style="margin-bottom: 15px;">
                        <div class="card-header">出勤概览 - 2025年4月</div>
                        <div class="card-body">
                            <div style="display: flex; justify-content: space-between; margin-bottom: 15px;">
                                <div style="text-align: center;">
                                    <div style="font-size: 24px; font-weight: bold; color: var(--primary-color);">18</div>
                                    <div style="font-size: 12px; color: var(--text-secondary);">出勤天数</div>
                                </div>
                                <div style="text-align: center;">
                                    <div style="font-size: 24px; font-weight: bold; color: var(--success-color);">2</div>
                                    <div style="font-size: 12px; color: var(--text-secondary);">休假天数</div>
                                </div>
                                <div style="text-align: center;">
                                    <div style="font-size: 24px; font-weight: bold; color: var(--warning-color);">2</div>
                                    <div style="font-size: 12px; color: var(--text-secondary);">迟到次数</div>
                                </div>
                                <div style="text-align: center;">
                                    <div style="font-size: 24px; font-weight: bold; color: var(--error-color);">1</div>
                                    <div style="font-size: 12px; color: var(--text-secondary);">早退次数</div>
                                </div>
                            </div>
                            <div style="width: 100%; height: 10px; background-color: #f5f5f5; border-radius: 5px; overflow: hidden;">
                                <div style="width: 60%; height: 100%; background-color: var(--primary-color);"></div>
                            </div>
                            <div style="font-size: 12px; color: var(--text-secondary); margin-top: 5px; text-align: right;">已完成 18/30 天</div>
                        </div>
                    </div>
                    
                    <div class="card" style="margin-bottom: 15px;">
                        <div class="card-header">工作时长统计</div>
                        <div class="card-body">
                            <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                                <div>本月累计工时</div>
                                <div>164小时</div>
                            </div>
                            <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                                <div>日均工作时长</div>
                                <div>9.1小时</div>
                            </div>
                            <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                                <div>加班时长</div>
                                <div>12小时</div>
                            </div>
                            <div style="display: flex; justify-content: space-between;">
                                <div>最长工作日</div>
                                <div>11.5小时 (4月16日)</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">考勤异常</div>
                        <div class="card-body" style="padding: 0;">
                            <div class="list-item">
                                <div class="item-content">
                                    <div class="item-title">迟到</div>
                                    <div class="item-desc">4月16日 上班打卡 09:35</div>
                                </div>
                                <div class="item-right">
                                    <span class="tag tag-orange">已确认</span>
                                </div>
                            </div>
                            <div class="list-item">
                                <div class="item-content">
                                    <div class="item-title">迟到</div>
                                    <div class="item-desc">4月9日 上班打卡 09:22</div>
                                </div>
                                <div class="item-right">
                                    <span class="tag tag-green">已审批</span>
                                </div>
                            </div>
                            <div class="list-item" style="border-bottom: none;">
                                <div class="item-content">
                                    <div class="item-title">早退</div>
                                    <div class="item-desc">4月2日 下班打卡 16:48</div>
                                </div>
                                <div class="item-right">
                                    <span class="tag tag-green">已审批</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bottom-nav">
                    <div class="nav-item">
                        <div class="nav-icon"><i class="fas fa-fingerprint"></i></div>
                        <div>打卡</div>
                    </div>
                    <div class="nav-item">
                        <div class="nav-icon"><i class="fas fa-calendar-alt"></i></div>
                        <div>记录</div>
                    </div>
                    <div class="nav-item active">
                        <div class="nav-icon"><i class="fas fa-user"></i></div>
                        <div>我的</div>
                    </div>
                </div>
            </div>
        </div>

        <div style="text-align: center; margin: 50px 0 20px; color: var(--text-secondary);">
            <p>企业OA系统设计与开发</p>
            <p>© 2025 Demo公司版权所有</p>
        </div>
    </div>
</body>
</html> 